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
Copy file name to clipboardExpand all lines: docs/upgrading/v6-data.md
+5-3Lines changed: 5 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ This brought about an interesting conundrum. We've got tons of v6 [`BrowserRoute
11
11
12
12
## Differences
13
13
14
-
The first thing to be aware of is the presence of a handful of new [Data APIs][data-apis] that only work on routes _defined_ via the new [data routers][picking-a-router] (i.e., `createBrowserRouter`). These include a few categories of APIs:
14
+
The first thing to be aware of is the presence of a handful of new [Data APIs][data-apis] that only work on routes _defined_ via the new [data routers][picking-a-router] (i.e., []`createBrowserRouter`][createbrowserrouter]). These include a few categories of APIs:
15
15
16
16
- Route-level data APIs such as `loader`, `action`, `shouldRevalidate`, `handle`, and `lazy`
17
17
- In-component data hooks such as `useLoaderData`, `useActionData`, `useFetcher`, `useMatches`, `useNavigation`, etc.
@@ -230,7 +230,9 @@ export default function App() {
230
230
}
231
231
```
232
232
233
-
This is quite common but poses a problem in the next step where everything inside `<BrowserRouter>` must be a `<Route>`. Thankfully the solution is straightforward - that app shell is nothing more than a layout route with an `<Outlet>`! So just add this "app shell" into a pathless layout route around your routes as follows:
233
+
If you find yourself in this situation, don't worry - there's a straightforward solution you can do _before_ starting the above migration.
234
+
235
+
This is quite common but poses a problem in the above migration approach since we need to lift things to `RouterProvider` route-by-route, but this "app shell" stuff isn't part of a route...but it could be! That "app shell" is really nothing more than a layout route with an `<Outlet>`! So before starting the above migration, just move this "app shell" into a pathless layout route around your routes as follows:
234
236
235
237
```jsx lines=[6,25]
236
238
exportdefaultfunctionApp() {
@@ -265,7 +267,7 @@ function Layout() {
265
267
}
266
268
```
267
269
268
-
Then when lifting routes into your `RouterProvider`, you likely want to lift the layout route first so all of the children can nest inside of it.
270
+
Once you've done that, you can proceed with the above migration strategy and start lifting routes into your `RouterProvider` one-by-one. You'll likely want to lift the layout route first so all of the children can nest inside of it.
0 commit comments