feat(react-router): upgrade to React Router v7 and React 18+ #1
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
- Upgrade react-router and react-router-dom dependencies to ^7.0.0
- Upgrade React peer dependencies to >=18.0.0 (required by RR v7)
- Remove history package dependency (no longer needed in v7)
**Core Router Component Refactoring:**
- Replace withRouter HOC with hooks-based wrapper in IonRouter
- Implement useNavigate, useLocation, useParams, useNavigationType hooks
- Replace BrowserRouter/HashRouter/MemoryRouter with v7 equivalents
- Convert IonRouteInner to functional component using matchPath
- Update ReactRouterViewStack to support element, component, and render props
- Create matchPath adapter to map v7 API to v5-compatible format
- Add children prop to StackManager for React 18 compatibility
**Test Application Migration:**
- Create reactrouter7 test app configuration
- Migrate all test base files to React Router v7 syntax:
- Replace component={X} with element={<X />}
- Replace Redirect with Navigate
- Remove exact prop (exact by default in v7)
- Replace useHistory with useNavigate
- Replace RouteComponentProps with useParams hook
- Update LocationHistory to use custom interface instead of history module
- Add null guards for optional route params
- Remove unsupported routerOptions from navigate calls
**Documentation:**
- Update README with v7 compatibility notice
- Add migration guide for users upgrading from v5/v6
**Breaking Changes:**
This is a major upgrade with several breaking changes for users:
- Requires React 18+ and React Router 7+
- withRouter HOC removed (use hooks)
- Route component prop replaced with element prop
- useHistory hook replaced with useNavigate
- RouteComponentProps type removed (use hooks)
- history package no longer used
**Verification:**
- Package compiles successfully with npm run compile
- Test app builds successfully with production bundle
- All v7 API compatibility issues resolved
Closes #[issue-number]
- Manually remove ion-page-invisible class after routerOutlet.commit() resolves - Fixes issue where pages could remain invisible if transition logic didn't clean up properly
- Check if child is a Route component and render null if so - Fixes crash when using <Route> directly inside <IonRouterOutlet> without element prop
- Ensure ion-page-invisible is removed even if commit fails or is interrupted - Improves robustness of page visibility management
…outer v7 - Add support for index routes - Handle relative paths in nested routes correctly - Set 'end' prop based on wildcard patterns (*) - Return null for pathless components (rely on matchDefaultRoute fallback) - Align with React Router v6/v7 semantics - Improve type safety with PathMatch<string> return type This fixes direct navigation and refresh issues where Routes component wasn't being matched correctly.
…ring for animations - Extract element/component/render from Route props when Route is used directly - Enables IonRouterOutlet to build navigation stack for sibling routes - Fixes missing animations when navigating between Route components - Maintains backward compatibility with Routes wrapper
…nd fix matchPath format - Fix matchPath.ts to return consistent v5 format (path/url/isExact) for all cases including index routes - Implement automatic Routes unwrapping in ReactRouterViewStack - Detect Routes component and extract individual Route children - Enables IonRouterOutlet to build navigation stack with Routes wrapper - Fixes 'Cannot read properties of undefined (reading includes)' crash - Enables page transition animations with Routes component This allows users to use both: <IonRouterOutlet><Routes><Route.../></Routes></IonRouterOutlet> and the unwrapped routes will be seen by the stack manager
- Add early validation to check if pathname is defined - Prevents crash when pathname is undefined/null - Fixes 'Cannot read properties of undefined' error
- Comment out mount=false to keep all visited routes in DOM - Add comments explaining animation requirements - Partial solution - Routes still controls rendering
- Create IonRouterOutletWrapper component for delayed unmounting - Detects route changes via useLocation hook - Keeps previous route mounted during transition (500ms) - Unmounts old route after animation completes - Revert WIP changes in ReactRouterViewStack (restore mount=false) - Export wrapper component for user consumption This enables smooth Ionic page animations with React Router v7 while maintaining clean DOM.
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.
Core Router Component Refactoring:
Test Application Migration:
Documentation:
Breaking Changes:
This is a major upgrade with several breaking changes for users:
Verification:
Closes #[issue-number]
Issue number: resolves #
What is the current behavior?
What is the new behavior?
Does this introduce a breaking change?
Other information