You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The `@ionic/react-router` package has been updated to support React Router 6. This migration replaces the React Router 5 integration with native RR6 APIs while preserving Ionic's navigation patterns, animations, and view lifecycle management.
10
10
11
-
All Cypress tests are now passing.
11
+
All Cypress tests are passing.
12
12
13
13
| Metric | Count |
14
14
|--------|-------|
15
-
| Total tests |70|
16
-
| Passing |70|
15
+
| Total tests |77|
16
+
| Passing |77|
17
17
| Failing | 0 |
18
18
19
19
## What Changed
@@ -29,31 +29,53 @@ The `@ionic/react-router` package now requires React Router 6:
29
29
}
30
30
```
31
31
32
+
The `history` package dependency was updated from v4 to v5 (which RR6 uses internally).
33
+
32
34
### Core Components
33
35
34
-
**IonRouter** was rewritten as a functional component using React hooks. It now uses `useLocation` and `useNavigate` from React Router 6 instead of the `withRouter` HOC and `history` object from v5. The component continues to manage `LocationHistory` and compute `RouteInfo` objects for Ionic's view stacks and transition directions.
36
+
**IonRouter**(`IonRouter.tsx`) was rewritten as a functional component using React hooks. It now uses `useLocation` and `useNavigate` from React Router 6 instead of the `withRouter` HOC and `history` object from v5. The component continues to manage `LocationHistory` and compute `RouteInfo` objects for Ionic's view stacks and transition directions.
35
37
36
-
**ReactRouterViewStack** was substantially expanded to handle RR6's matching semantics. Key additions include:
38
+
**ReactRouterViewStack**(`ReactRouterViewStack.tsx`) was substantially expanded to handle RR6's matching semantics. Key changes include:
37
39
- Support for RR6's `PathMatch` objects and pattern matching
38
40
- Handling of index routes and wildcard routes (`*`)
39
41
- View identity tracking for parameterized routes (`/user/:id`)
40
42
- Proper computation of parent paths for nested outlets
43
+
- View cleanup for cross-navigation scenarios (e.g., navigating between different tab stacks)
41
44
42
-
**StackManager** was updated to work with the new view stack implementation. Changes include:
45
+
**StackManager**(`StackManager.tsx`) was updated to work with the new view stack implementation. Changes include:
43
46
- Parent path derivation using RR6's route matching
44
47
- Improved handling of `Navigate` redirect components
45
48
- Better coordination of entering/leaving views during transitions
49
+
- Hiding of deactivated catch-all routes to prevent visual glitches
50
+
51
+
**IonRouteInner** (`IonRouteInner.tsx`) was simplified to work with RR6's element-based routing instead of the component/render prop pattern.
52
+
53
+
**Router Components** (`IonReactRouter.tsx`, `IonReactHashRouter.tsx`, `IonReactMemoryRouter.tsx`) were updated to use RR6's router components and hooks.
46
54
47
55
### New Utilities
48
56
49
-
Four utility modules were added to support RR6's routing model:
57
+
Five utility modules were added to support RR6's routing model:
50
58
51
59
| File | Purpose |
52
60
|------|---------|
53
-
|`matchPath.ts`| Extended path matching with RR6 pattern syntax |
54
-
|`matchRoutesFromChildren.ts`| Converts Route children to RouteObjects for RR6's `matchRoutes`|
55
-
|`derivePathnameToMatch.ts`| Computes the pathname portion relevant to a nested outlet |
56
-
|`findRoutesNode.ts`| Locates Routes containers in the component tree |
61
+
|`computeParentPath.ts`| Computes common path prefixes and determines specific route matches for nested outlets |
62
+
|`pathMatching.ts`| Extended path matching using RR6's `matchPath` with support for index routes |
| dynamic-ionpage-classnames.cy.js | 1 | Dynamic class application to IonPage |
83
111
| outlet-ref.cy.js | 1 | Ref access to IonRouterOutlet |
84
112
| replace-actions.cy.js | 1 | History replacement behavior |
85
113
114
+
### New Test Suite: Cross-Route Navigation
115
+
116
+
A new test suite (`cross-route-navigation.cy.js`) was added to verify proper view cleanup when navigating between different route contexts:
117
+
- Tab-to-non-tab navigation
118
+
- Non-tab-to-tab navigation
119
+
- Between different tab configurations
120
+
- Deep link scenarios
121
+
86
122
## Known Limitations
87
123
88
124
### Route Path Syntax
@@ -99,74 +135,118 @@ Nested outlets require parent routes to include a trailing wildcard:
99
135
100
136
This aligns with React Router 6's nested routing semantics where child routes are matched relative to the parent's path.
101
137
102
-
##Next Steps
138
+
### Relative vs Absolute Paths
103
139
104
-
### Before Alpha Release
105
-
106
-
1.~~**Run a TypeScript strict check** on the `@ionic/react-router` package~~ Complete - all type errors resolved
107
-
2.**Manual testing pass** through the test app to verify animations and gestures feel correct
108
-
109
-
### Documentation
140
+
React Router 6 strongly favors relative paths for nested routing. While absolute paths still work, using relative paths in nested outlets is recommended:
110
141
111
-
The following documentation should be prepared before public release:
112
-
113
-
1.**Migration guide** covering:
114
-
- Route syntax changes (`component` to `element`, `Redirect` to `Navigate`)
The key insight is that Ionic intercepts React Router's navigation events and translates them into its own view management system, which enables native-feeling animations and gestures while still using React Router for URL management.
161
188
189
+
## Next Steps
190
+
191
+
### Before Release
192
+
193
+
1.~~**Run a TypeScript strict check** on the `@ionic/react-router` package~~ Complete
0 commit comments