Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix useNavigate when called from <Routes> inside a <RouterProvider> #10432

Merged
merged 1 commit into from
May 2, 2023

Conversation

brophdawg11
Copy link
Contributor

Closes #10430

@changeset-bot
Copy link

changeset-bot bot commented May 2, 2023

🦋 Changeset detected

Latest commit: 699391c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
react-router Patch
react-router-dom Patch
react-router-dom-v5-compat Patch
react-router-native Patch

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

@brophdawg11 brophdawg11 linked an issue May 2, 2023 that may be closed by this pull request
// 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();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order to get route-aware "am I in a data router" we add isDataRoute to the RouteContext

@brophdawg11 brophdawg11 merged commit 5e195ec into dev May 2, 2023
@brophdawg11 brophdawg11 deleted the brophdawg11/navigate-from-routes branch May 2, 2023 16:47
@github-actions
Copy link
Contributor

github-actions bot commented May 2, 2023

🤖 Hello there,

We just published version 6.11.1-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@github-actions
Copy link
Contributor

github-actions bot commented May 3, 2023

🤖 Hello there,

We just published version 6.11.1 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: useNavigate inside useRoutes broken in 6.11.0
3 participants