Fix descendant Routes rendering alongside RouterProvider errors #10374
Conversation
🦋 Changeset detectedLatest commit: 11a129a The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| <Outlet /> | ||
| <Routes> | ||
| <Route index element={<h1>Descendant</h1>} /> | ||
| </Routes> |
There was a problem hiding this comment.
This is a bit of an unusual use-case. Normally the presence of an error would mean we don't reach descendant <Routes> down inside children Component's. But if the <Routes> is next to the <Outlet /> then both can render at the same time.
| routes: DataRouteObject[]; | ||
| }): React.ReactElement | null { | ||
| return useRoutes(routes); | ||
| } |
There was a problem hiding this comment.
This allows us to remove the fork from <Routes> since we can pass the routes more directly to useRoutes this way instead of reaching back into context
| ? (dataRouterContext.router.routes as DataRouteObject[]) | ||
| : createRoutesFromChildren(children); | ||
| return useRoutes(routes, location); | ||
| return useRoutes(createRoutesFromChildren(children), location); |
There was a problem hiding this comment.
This is now back to only being used for non-data routers
| // Only pass along the dataRouterStateContext when we're rendering from the | ||
| // RouterProvider layer. If routes is different then we're rendering from | ||
| // a descendant <Routes> tree | ||
| dataRouterContext?.router.routes === routes ? dataRouterStateContext : null |
There was a problem hiding this comment.
This is the root of the bug - _renderMatches was behaving as if in a data router anywhere under the context, including in descendant <Routes>. A potentially more explicit fix would be an optional prop to useRoutes but I was on the fence about touching the public API:
export function useRoutes(
routes: RouteObject[],
locationArg?: Partial<Location> | string,
isDataRouterRender?: boolean, // New arg passed true from <DataRoutes>
)
|
excited to test this fix! 😄 |
|
🤖 Hello there, We just published version Thanks! |
|
🤖 Hello there, We just published version Thanks! |
Fix descendant
<Routes>rendering inside aRouterProviderwhen data routes errors existCloses #10317