Skip to content

Commit 2d57ccb

Browse files
satya164satya164
committed
Update migration from Expo Router guides
1 parent 2f86b7c commit 2d57ccb

2 files changed

Lines changed: 37 additions & 15 deletions

File tree

‎versioned_docs/version-7.x/from-expo-router.md‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,11 @@ React Navigation starts with the navigation tree:
6666

6767
## Migration checklist
6868

69-
1. Remove Expo Router as the entry point.
69+
1. Install React Navigation.
70+
71+
Follow the [Getting started](getting-started.md) guide to install React Navigation and the dependencies used by the navigators you need.
72+
73+
2. Remove Expo Router as the entry point.
7074

7175
If your app uses [`expo-router/entry`](https://docs.expo.dev/router/installation) in `package.json`, replace it with your app's entry file. If you don't use Expo Router anywhere else, remove the `expo-router` package and the `expo-router` config plugin from your Expo app config.
7276

@@ -85,7 +89,7 @@ React Navigation starts with the navigation tree:
8589
registerRootComponent(App);
8690
```
8791

88-
2. Create a root navigator.
92+
3. Create a root navigator.
8993

9094
Define your root navigator with a `createXNavigator` function, create screen configs with the matching [`createXScreen`](static-configuration.md#createxscreen) helper, and render it with [`createStaticNavigation`](static-configuration.md#createstaticnavigation):
9195

@@ -120,7 +124,7 @@ React Navigation starts with the navigation tree:
120124
}
121125
```
122126

123-
3. Move each route file into a screen registration.
127+
4. Move each route file into a screen registration.
124128

125129
A route file such as `app/profile/[userId].tsx` becomes a screen component registered in a navigator. Keep the component code, but replace Expo Router hooks with React Navigation's [`useRoute`](use-route.md) (or `route` prop) and [`useNavigation`](use-navigation.md) hooks.
126130

@@ -142,7 +146,7 @@ React Navigation starts with the navigation tree:
142146
}
143147
```
144148

145-
4. Recreate `_layout.tsx` files with nested navigators.
149+
5. Recreate `_layout.tsx` files with nested navigators.
146150

147151
A layout returning `<Stack />` becomes [`createNativeStackNavigator`](native-stack-navigator.md) or [`createStackNavigator`](stack-navigator.md), `<Tabs />` becomes [`createBottomTabNavigator`](bottom-tab-navigator.md), `<NativeTabs />` becomes [`createNativeBottomTabNavigator`](native-bottom-tab-navigator.md), and `<Drawer />` becomes [`createDrawerNavigator`](drawer-navigator.md). Nested layout files become [nested navigators](nesting-navigators.md).
148152

@@ -167,7 +171,7 @@ React Navigation starts with the navigation tree:
167171
});
168172
```
169173

170-
5. Recreate URLs with linking configuration.
174+
6. Recreate URLs with linking configuration.
171175

172176
Expo Router infers paths from file names. React Navigation [generates paths automatically based on screen names](configuring-links.md#how-does-automatic-path-generation-work), and you can override paths with the `linking` property on a screen for custom patterns.
173177

@@ -186,7 +190,7 @@ React Navigation starts with the navigation tree:
186190

187191
For example, Expo Router's `app/profile/[userId].tsx` can become a root stack screen with `linking: 'profile/:userId'`.
188192

189-
6. Replace redirects and protected routes.
193+
7. Replace redirects and protected routes.
190194

191195
Replace [`Redirect`](https://docs.expo.dev/versions/latest/sdk/router/link#redirect) and [protected route groups](https://docs.expo.dev/router/advanced/protected) with conditional screens or groups. In static configuration, use the [`if`](static-configuration.md#if) property described in the [authentication flow](auth-flow.md?config=static) guide. When the condition changes, screens that no longer match are removed from the navigation state.
192196

@@ -205,7 +209,7 @@ React Navigation starts with the navigation tree:
205209
});
206210
```
207211

208-
7. Handle unmatched routes and deep links.
212+
8. Handle unmatched routes and deep links.
209213

210214
Replace [`+not-found`](https://docs.expo.dev/router/error-handling/#unmatched-routes) with a screen that uses a catch-all linking path such as `'*'`. Replace [`+native-intent`](https://docs.expo.dev/router/advanced/native-intent) with [`getInitialURL` and `subscribe`](deep-linking.md#integrating-with-other-tools) in the [`linking`](navigation-container.md#linking) configuration.
211215

@@ -248,6 +252,11 @@ React Navigation starts with the navigation tree:
248252
| [`router.navigate`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.navigate`](navigation-object.md#navigate) |
249253
| [`router.replace`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.replace`](stack-actions.md#replace) in stack navigators |
250254
| [`router.back`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.goBack`](navigation-object.md#goback) |
255+
| [`router.canGoBack`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.canGoBack`](navigation-object.md#cangoback) |
256+
| [`router.dismiss`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.pop`](stack-actions.md#pop) in stack navigators |
257+
| [`router.dismissTo`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.popTo`](stack-actions.md#popto) in stack navigators |
258+
| [`router.dismissAll`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.popToTop`](stack-actions.md#poptotop) in stack navigators |
259+
| [`router.canDismiss`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.canGoBack`](navigation-object.md#cangoback) in stack navigators |
251260
| [`router.setParams`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.setParams`](navigation-object.md#setparams) and [`navigation.replaceParams`](navigation-actions.md#replaceparams) |
252261
| [`router.prefetch`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.preload`](navigation-object.md#preload) |
253262
| [`useRouter`](https://docs.expo.dev/versions/latest/sdk/router/#userouter) | [`useNavigation`](use-navigation.md) |

‎versioned_docs/version-8.x/from-expo-router.md‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,13 @@ React Navigation starts with the navigation tree:
6767

6868
## Migration checklist
6969

70-
1. Remove Expo Router as the entry point.
70+
1. Install React Navigation.
71+
72+
Follow the [Getting started](getting-started.md) guide to install React Navigation and the dependencies used by the navigators you need.
73+
74+
If your app runs in [Expo Go](https://expo.dev/go), you'll also need to switch to a [development build](https://docs.expo.dev/development/introduction/), since Expo Go doesn't support React Navigation 8.
75+
76+
2. Remove Expo Router as the entry point.
7177

7278
If your app uses [`expo-router/entry`](https://docs.expo.dev/router/installation) in `package.json`, replace it with your app's entry file. If you don't use Expo Router anywhere else, remove the `expo-router` package and the `expo-router` config plugin from your Expo app config.
7379

@@ -86,7 +92,7 @@ React Navigation starts with the navigation tree:
8692
registerRootComponent(App);
8793
```
8894

89-
2. Create a root navigator.
95+
3. Create a root navigator.
9096

9197
Define your root navigator with a `createXNavigator` function, create screen configs with the matching [`createXScreen`](static-configuration.md#createxscreen) helper, and render it with [`createStaticNavigation`](static-configuration.md#createstaticnavigation):
9298

@@ -121,7 +127,7 @@ React Navigation starts with the navigation tree:
121127
}
122128
```
123129

124-
3. Move each route file into a screen registration.
130+
4. Move each route file into a screen registration.
125131

126132
A route file such as `app/profile/[userId].tsx` becomes a screen component registered in a navigator. Keep the component code, but replace Expo Router hooks with React Navigation hooks such as [`useRoute`](use-route.md) and [`useNavigation`](use-navigation.md).
127133

@@ -145,7 +151,7 @@ React Navigation starts with the navigation tree:
145151
}
146152
```
147153

148-
4. Recreate `_layout.tsx` files with nested navigators.
154+
5. Recreate `_layout.tsx` files with nested navigators.
149155

150156
A layout returning `<Stack />` becomes [`createNativeStackNavigator`](native-stack-navigator.md) or [`createStackNavigator`](stack-navigator.md), `<Tabs />` becomes [`createBottomTabNavigator`](bottom-tab-navigator.md), and `<Drawer />` becomes [`createDrawerNavigator`](drawer-navigator.md). Nested layout files become [nested navigators](nesting-navigators.md).
151157

@@ -170,7 +176,7 @@ React Navigation starts with the navigation tree:
170176
});
171177
```
172178

173-
5. Recreate URLs with linking configuration.
179+
6. Recreate URLs with linking configuration.
174180

175181
Expo Router infers paths from file names. React Navigation [generates paths automatically based on screen names](configuring-links.md#how-does-automatic-path-generation-work), and you can override paths with the `linking` property on a screen for custom patterns.
176182

@@ -189,7 +195,9 @@ React Navigation starts with the navigation tree:
189195

190196
For example, Expo Router's `app/profile/[userId].tsx` can become a root stack screen with `linking: 'profile/:userId'`.
191197

192-
6. Replace redirects and protected routes.
198+
[Shared routes](https://docs.expo.dev/router/advanced/shared-routes) - defined with array syntax in group names such as `(feed,search)` - don't need an equivalent configuration. When the same screen is used in multiple navigators, React Navigation automatically treats its path as [shared](configuring-links.md#shared-paths), so all of them use a single URL. Expo Router targets a specific copy by including the group in the URL, e.g. `/(search)/profile/jane`. React Navigation has no such segment - opening `/profile/jane` keeps the current tab focused and opens `Profile` in that tab.
199+
200+
7. Replace redirects and protected routes.
193201

194202
Replace [`Redirect`](https://docs.expo.dev/versions/latest/sdk/router/link#redirect) and [protected route groups](https://docs.expo.dev/router/advanced/protected) with conditional screens or groups. In static configuration, use the [`if`](static-configuration.md#if) property described in the [authentication flow](auth-flow.md?config=static) guide. When the condition changes, screens that no longer match are removed from the navigation state.
195203

@@ -208,7 +216,7 @@ React Navigation starts with the navigation tree:
208216
});
209217
```
210218

211-
7. Handle unmatched routes and deep links.
219+
8. Handle unmatched routes and deep links.
212220

213221
Replace [`+not-found`](https://docs.expo.dev/router/error-handling/#unmatched-routes) with a screen that uses a catch-all linking path such as `'*'`. Replace [`+native-intent`](https://docs.expo.dev/router/advanced/native-intent) with [`getInitialURL` and `subscribe`](deep-linking.md#integrating-with-other-tools) in the [`linking`](navigation-container.md#linking) configuration.
214222

@@ -251,6 +259,11 @@ React Navigation starts with the navigation tree:
251259
| [`router.navigate`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.navigate`](navigation-object.md#navigate) |
252260
| [`router.replace`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.replace`](stack-actions.md#replace) in stack navigators |
253261
| [`router.back`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.goBack`](navigation-object.md#goback) |
262+
| [`router.canGoBack`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.canGoBack`](navigation-object.md#cangoback) |
263+
| [`router.dismiss`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.pop`](stack-actions.md#pop) in stack navigators |
264+
| [`router.dismissTo`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.popTo`](stack-actions.md#popto) in stack navigators |
265+
| [`router.dismissAll`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.popToTop`](stack-actions.md#poptotop) in stack navigators |
266+
| [`router.canDismiss`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.canGoBack`](navigation-object.md#cangoback) in stack navigators |
254267
| [`router.setParams`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.setParams`](navigation-object.md#setparams), [`navigation.replaceParams`](navigation-actions.md#replaceparams) and [`navigation.pushParams`](navigation-actions.md#pushparams) |
255268
| [`router.prefetch`](https://docs.expo.dev/versions/latest/sdk/router/#imperativerouter) | [`navigation.preload`](navigation-object.md#preload) |
256269
| [`useRouter`](https://docs.expo.dev/versions/latest/sdk/router/#userouter) | [`useNavigation`](use-navigation.md) |
@@ -261,7 +274,7 @@ React Navigation starts with the navigation tree:
261274
| [`useFocusEffect`](https://docs.expo.dev/versions/latest/sdk/router/#usefocuseffecteffect-do_not_pass_a_second_prop) | [`useFocusEffect`](use-focus-effect.md) |
262275
| [`useNavigation`](https://docs.expo.dev/versions/latest/sdk/router/#usenavigationparent) | [`useNavigation`](use-navigation.md) |
263276
| [`useSitemap`](https://docs.expo.dev/versions/latest/sdk/router/#usesitemap) | No direct equivalent. |
264-
| [`useLoaderData`](https://docs.expo.dev/router/web/data-loaders) | No direct equivalent, but planned. |
277+
| [`useLoaderData`](https://docs.expo.dev/router/web/data-loaders) | No equivalent hook. A screen can define a [loader](data-loading.md) to start fetching on navigation, and read the data from your data fetching library. |
265278

266279
### Features without direct replacements
267280

0 commit comments

Comments
 (0)