feat(react-router): upgrade to react router 6 #30831
Open
+4,170
−1,830
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
…ter 6 Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
…ct router 6 Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
… router 6 Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
ShaneK
force-pushed
the
sk/react-router-6
branch
from
4d401c1 to
c60a99d
Compare
ShaneK
force-pushed
the
sk/react-router-6
branch
from
c60a99d to
a565a37
Compare
ShaneK
requested review from
brandyscarney and
thetaPC
and removed request for
OS-jacobbell
Contributor
|
Took you long enough...Good job shane |
| fail-fast: false | ||
| matrix: | ||
| apps: [reactrouter5] | ||
| apps: [reactrouter6] |
Member
There was a problem hiding this comment.
We should either update the breaking changes file to include no longer supporting react router 5 or create a follow-up task since doing so might conflict with next: https://github.com/ionic-team/ionic-framework/blob/next/BREAKING.md
Member
Author
There was a problem hiding this comment.
Yeah, I still need to document migration strategies and such. For the most part, it's a pretty easy migration (ignore the inline overlay stuff, that was all removed), but I just need to write it out.
Member
Author
There was a problem hiding this comment.
I went ahead and did this in this branch, figuring it would be an easy enough merge conflict resolution. If you'd like to review in an easier to read way:
https://github.com/ionic-team/ionic-framework/blob/b2a71050344052a4858d0c8b6712f0d5bc9d7219/BREAKING.md
Member
There was a problem hiding this comment.
It looks good but the v8 breaking changes need to be moved to here: https://github.com/ionic-team/ionic-framework/tree/b2a71050344052a4858d0c8b6712f0d5bc9d7219/BREAKING_ARCHIVE
This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [actions/setup-node](https://redirect.github.com/actions/setup-node) | action | minor | `v6.0.0` -> `v6.1.0` | --- ### Release Notes <details> <summary>actions/setup-node (actions/setup-node)</summary> ### [`v6.1.0`](https://redirect.github.com/actions/setup-node/releases/tag/v6.1.0) [Compare Source](https://redirect.github.com/actions/setup-node/compare/v6.0.0...v6.1.0) #### What's Changed ##### Enhancement: - Remove always-auth configuration handling by [@​priyagupta108](https://redirect.github.com/priyagupta108) in [#​1436](https://redirect.github.com/actions/setup-node/pull/1436) ##### Dependency updates: - Upgrade [@​actions/cache](https://redirect.github.com/actions/cache) from 4.0.3 to 4.1.0 by [@​dependabot](https://redirect.github.com/dependabot)\[bot] in [#​1384](https://redirect.github.com/actions/setup-node/pull/1384) - Upgrade actions/checkout from 5 to 6 by [@​dependabot](https://redirect.github.com/dependabot)\[bot] in [#​1439](https://redirect.github.com/actions/setup-node/pull/1439) - Upgrade js-yaml from 3.14.1 to 3.14.2 by [@​dependabot](https://redirect.github.com/dependabot)\[bot] in [#​1435](https://redirect.github.com/actions/setup-node/pull/1435) ##### Documentation update: - Add example for restore-only cache in documentation by [@​aparnajyothi-y](https://redirect.github.com/aparnajyothi-y) in [#​1419](https://redirect.github.com/actions/setup-node/pull/1419) **Full Changelog**: <actions/setup-node@v6...v6.1.0> </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4xOS45IiwidXBkYXRlZEluVmVyIjoiNDIuMTkuOSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [actions/checkout](https://redirect.github.com/actions/checkout) | action | patch | `v6.0.0` -> `v6.0.1` | --- ### Release Notes <details> <summary>actions/checkout (actions/checkout)</summary> ### [`v6.0.1`](https://redirect.github.com/actions/checkout/compare/v6.0.0...v6.0.1) [Compare Source](https://redirect.github.com/actions/checkout/compare/v6.0.0...v6.0.1) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4xOS45IiwidXBkYXRlZEluVmVyIjoiNDIuMzIuMiIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
…een sibling routes
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Core does not indicate what node version we should be running, which can lead to inconsistent versions between local and workflows. These inconsistencies can lead to workflow failures. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Provides the node version within package - Updates the node version of workflows and package at the same time ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> `high-contrast` and `high-contrast-dark` palettes were not working when requested through a URL query or hash for a test page. This was due to the `match` not accepting hyphens so it would only save `high` which is not a valid palette. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated `match` to accept hyphens - Added an error if an invalid palette is provided - Added a palette fallback if an invalid palette is provided - Added a class check for high contrast and high contrast dark ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> How to test: 1. Verify that `?palette=high-contrast`, `?palette=high-contrast-dark`, `#palette=high-contrast`, and `#palette=high-contrast-dark` render correctly (I recommend using [button basic page](https://ionic-framework-git-scripts-ionic1.vercel.app/src/components/button/test/basic/)) --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The screen reader does not announce when an option is selected within the action sheet interface. This is because the action sheet uses standard buttons, which do not support a detectable selected state via native properties or ARIA attributes like `aria-checked` or `aria-selected`, creating an inconsistent user experience across different interface types. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated the action sheet buttons to accept `role="radio"` - Added keyboard navigation to follow the pattern for radio group - Added test ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Basic](https://ionic-framework-git-fw-6818-ionic1.vercel.app/src/components/select/test/basic/) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Shane <shane@shanessite.net> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue number: resolves #24177
What is the current behavior?
Currently, Ionic Framework React Router only supports React Router 5. This has many issues and unsupported/broken features.
What is the new behavior?
With this change, Ionic Framework will support React Router 6 while still supporting transitions in the same way a native app does.
Most of what caused this change to take a long time is that React Router 5 and React Router 6 have fundamental differences in how they handle components once they're no longer part of the view. In this change, we move away from relying on React Router directly so much and have our own implementation for deciding how views get dealt with during navigation and when they're cleaned up, allowing for us to still transition between them like we need to while still using React Router as much as we possibly can.
This change will also lay the foundation for the migration to React Router 7, which will ideally be easier since most of the hard work has been dealt with here.
Does this introduce a breaking change?
Other information
Current dev build: