Fix useNavigate when called from <Routes> inside a <RouterProvider> #10432
Conversation
🦋 Changeset detectedLatest commit: 699391c 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 |
| // Conditional usage is OK here because the usage of a data router is static | ||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| return isDataRouter ? useNavigateStable() : useNavigateUnstable(); | ||
| return isDataRoute ? useNavigateStable() : useNavigateUnstable(); |
There was a problem hiding this comment.
We can't just look for any ancestor data router context, since that gives a false positive if we're in a descendanrt routes:
let router = createBrowserRouter([{
path: '/*',
Component() {
return (
<Routes>
<Route path="/" element={<Home />} />
</Routes>
);
}
}]);
function Home() {
let navigate = useNavigate();
// ^ This should use `useNavigateUnstable` since it's the router is
// unaware of the descendant routes hierarchy and cannot handle
// the relative routing logic.
}
function App() {
return <RouterProvider router={router} />
}
| routeContext={{ | ||
| outlet, | ||
| matches, | ||
| isDataRoute: dataRouterState != null, |
There was a problem hiding this comment.
In order to get route-aware "am I in a data router" we add isDataRoute to the RouteContext
|
🤖 Hello there, We just published version Thanks! |
|
🤖 Hello there, We just published version Thanks! |
Closes #10430