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

[Bug]: useNavigate inside useRoutes broken in 6.11.0 #10430

Closed
mycroes opened this issue May 2, 2023 · 7 comments · Fixed by #10432
Closed

[Bug]: useNavigate inside useRoutes broken in 6.11.0 #10430

mycroes opened this issue May 2, 2023 · 7 comments · Fixed by #10432
Labels

Comments

@mycroes
Copy link

mycroes commented May 2, 2023

What version of React Router are you using?

6.11.0

Steps to Reproduce

https://codesandbox.io/s/react-router-dom-6-11-0-si04vs

Summary:
<Link /> inside route rendered from useRoutes is broken, error given indicates that useNavigate inside route rendered from useRoutes is actually broken. I'm expecting this is a bug and not incorrect usage (no matter that it's a regression since 6.10.0).

Expected Behavior

Link renders (works in 6.10.0)

Actual Behavior

Following error is shown:
Error: useNavigate can only be used on routes that contain a unique "id" at invariant (https://si04vs.csb.app/node_modules/@remix-run/router/dist/router.js:407:11) at useCurrentRouteId (https://si04vs.csb.app/node_modules/react-router/dist/index.js:761:111) at useNavigateStable (https://si04vs.csb.app/node_modules/react-router/dist/index.js:843:12) at useNavigate (https://si04vs.csb.app/node_modules/react-router/dist/index.js:468:25) at useLinkClickHandler (https://si04vs.csb.app/node_modules/react-router-dom/dist/index.js:925:53) at LinkWithRef (https://si04vs.csb.app/node_modules/react-router-dom/dist/index.js:781:25) at renderWithHooks (https://si04vs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:16305:18) at updateForwardRef (https://si04vs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19226:20) at beginWork (https://si04vs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21636:16) at beginWork$1 (https://si04vs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:27426:14) at performUnitOfWork (https://si04vs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26557:12) at workLoopSync (https://si04vs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (https://si04vs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26434:7) at recoverFromConcurrentError (https://si04vs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25850:20) at performConcurrentWorkOnRoot (https://si04vs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25750:22) at workLoop (https://si04vs.csb.app/node_modules/scheduler/cjs/scheduler.development.js:266:34) at flushWork (https://si04vs.csb.app/node_modules/scheduler/cjs/scheduler.development.js:239:14) at performWorkUntilDeadline (https://si04vs.csb.app/node_modules/scheduler/cjs/scheduler.development.js:533:21) at https://codesandbox.io/static/js/vendors~react-devtools-backend.98d1f41bf.chunk.js:1:230293 at h (https://codesandbox.io/static/js/vendors~react-devtools-backend.98d1f41bf.chunk.js:1:230408) at s (https://codesandbox.io/static/js/vendors~react-devtools-backend.98d1f41bf.chunk.js:1:229766)

@mycroes mycroes added the bug label May 2, 2023
@a-irizi
Copy link

a-irizi commented May 2, 2023

i have the same problem, i'm trying to create a funciton for authorization like the following:

import { redirect } from "react-router-dom";

export async function requireAuth() {
  // assume user is not loggend in
  const isLoggedIn = false;

  console.log("isLoggedIn", isLoggedIn);
  if (!isLoggedIn) {
    throw redirect("/login");
  }
};

when i use it in a route like the following way:

          <Route
            path="object"
            element={<Object />}
            loader={async () => await requireAuth()}
          />

but i get an error page with the title Unexpected Application Error! indicating that i should provide a better ux experience to the end user with the following code.

@a-irizi
Copy link

a-irizi commented May 2, 2023

i changed the react router to version 6.4.3 and it works fine now.

@brophdawg11
Copy link
Contributor

Thanks @mycroes - it looks like our detection of "are we in a data router" is a bit too broad and detects the top-level data router, without catching that we're nested in a separate <Routes>/useRoutes

@brophdawg11 brophdawg11 added the awaiting release This issue have been fixed and will be released soon label May 2, 2023
@brophdawg11 brophdawg11 removed their assignment May 2, 2023
@brophdawg11
Copy link
Contributor

This is fixed by #10432 and should be available once 6.11.1 is released

@mycroes
Copy link
Author

mycroes commented May 2, 2023

Thanks a lot!

@github-actions
Copy link
Contributor

github-actions bot commented May 2, 2023

🤖 Hello there,

We just published version 6.11.1-pre.0 which involves this issue. 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 involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@brophdawg11 brophdawg11 removed the awaiting release This issue have been fixed and will be released soon label Jun 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants