Skip to content

Commit f8883e1

Browse files
committed
Update patchRoutesOnMiss docs to reflect index matching
1 parent 2f25789 commit f8883e1

File tree

1 file changed

+46
-34
lines changed

1 file changed

+46
-34
lines changed

docs/routers/create-browser-router.md

Lines changed: 46 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -478,24 +478,16 @@ let router = createBrowserRouter(
478478
path: "/",
479479
Component: Home,
480480
},
481-
{
482-
id: "dashboard",
483-
path: "/dashboard",
484-
},
485-
{
486-
id: "account",
487-
path: "/account",
488-
},
489481
],
490482
{
491483
async unstable_patchRoutesOnMiss({ path, patch }) {
492484
if (path.startsWith("/dashboard")) {
493485
let children = await import("./dashboard");
494-
patch("dashboard", children);
486+
patch(null, children);
495487
}
496488
if (path.startsWith("/account")) {
497489
let children = await import("./account");
498-
patch("account", children);
490+
patch(null, children);
499491
}
500492
},
501493
}
@@ -507,32 +499,52 @@ let router = createBrowserRouter(
507499
If you don't wish to perform your own pseudo-matching, you can leverage the partial `matches` array and the `handle` field on a route to keep the children definitions co-located:
508500

509501
```jsx
510-
let router = createBrowserRouter([
511-
{
512-
path: "/",
513-
Component: Home,
514-
},
515-
{
516-
path: "/dashboard",
517-
handle: {
518-
lazyChildren: () => import('./dashboard');
519-
}
520-
},
502+
let router = createBrowserRouter(
503+
[
504+
{
505+
path: "/",
506+
Component: Home,
507+
},
508+
{
509+
path: "/dashboard",
510+
children: [
511+
{
512+
// If we want to include /dashboard in the critical routes, we need to
513+
// also include it's index route since patchRoutesOnMiss will not be
514+
// called on a navigation to `/dashboard` because it will have successfully
515+
// matched the `/dashboard` parent route
516+
index: true,
517+
// ...
518+
},
519+
],
520+
handle: {
521+
lazyChildren: () => import("./dashboard"),
522+
},
523+
},
524+
{
525+
path: "/account",
526+
children: [
527+
{
528+
index: true,
529+
// ...
530+
},
531+
],
532+
handle: {
533+
lazyChildren: () => import("./account"),
534+
},
535+
},
536+
],
521537
{
522-
path: "/account",
523-
handle: {
524-
lazyChildren: () => import('./account');
525-
}
526-
},
527-
], {
528-
async unstable_patchRoutesOnMiss({ matches, patch }) {
529-
let leafRoute = matches[matches.length - 1]?.route;
530-
if (leafRoute?.handle?.lazyChildren) {
531-
let children = await leafRoute.handle.lazyChildren();
532-
patch(leafRoute.id, children);
533-
}
538+
async unstable_patchRoutesOnMiss({ matches, patch }) {
539+
let leafRoute = matches[matches.length - 1]?.route;
540+
if (leafRoute?.handle?.lazyChildren) {
541+
let children =
542+
await leafRoute.handle.lazyChildren();
543+
patch(leafRoute.id, children);
544+
}
545+
},
534546
}
535-
});
547+
);
536548
```
537549
538550
## `opts.window`

0 commit comments

Comments
 (0)