v7: useNavigate() may be used only in the context of a <Router> component

[LekoArts]

Note

If you have the same issue, please also visit #12475

I'm using React Router as a...

framework

Reproduction

https://github.com/lekoarts-demos/react-router-use-navigate-bug

For the reproduction to run you'll need a Clerk account to generate a pair of publishable key/secret key. On your Discord we have a shared channel with Clerk where I could also share credentials if you want, I didn't want to put them into a public repository.

System Info

System:
    OS: macOS 15.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 101.11 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/Library/Caches/fnm_multishells/90793_1732613658873/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/90793_1732613658873/bin/yarn
    npm: 10.2.4 - ~/Library/Caches/fnm_multishells/90793_1732613658873/bin/npm
    pnpm: 9.14.2 - ~/Library/Caches/fnm_multishells/90793_1732613658873/bin/pnpm
    bun: 1.1.18 - ~/.bun/bin/bun
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 18.1
  npmPackages:
    @react-router/dev: 7.0.1 => 7.0.1
    @react-router/node: 7.0.1 => 7.0.1
    @react-router/serve: 7.0.1 => 7.0.1
    react-router: 7.0.1 => 7.0.1
    vite: ^5.4.11 => 5.4.11

Used Package Manager

pnpm

Expected Behavior

Hello!

I'm working for Clerk and I'm currently in the process of adding an SDK for React Router (we have an existing one for Remix). My WIP PR is here: clerk/javascript#4621

Unfortunately, I'm running into a problem with our current setup where I get the error:

Error: useNavigate() may be used only in the context of a <Router> component.

The stacktrace leads to a custom hook in our SDK that uses useNavigate(). Our <ClerkProvider> (that uses that hook) is used inside the root.tsx file and wrapping the <Outlet />.

In the commit lekoarts-demos/react-router-use-navigate-bug@ede0603 of the reproduction repository you can see the expected behavior. You use the <ClerkProvider> and our components/hooks have access to the react-router hooks.

Actual Behavior

Unfortunately, the only way I got it to work was like this:

https://github.com/lekoarts-demos/react-router-use-navigate-bug/blob/783c37fb93f02baadf15103eddbaa91ca78fd9ce/app/root.tsx#L64-L79

By manually passing the hooks (or their return values) through the provider into our components. You can browse the reproduction value between the states of "actual behavior" and "expected behavior".

I've found #12368 and #11016 but pnpm ls react-router shows that only one instance of react-router is used. Our SDK only defines it as a peerDependency.

[RMCampos]

Having the very same issue.

System Info

System:
    OS: Windows 11 Pro
    CPU: AMD Ryzen 5 3450U
    Memory: 24.0GB
    Shell: 5.2.15 - /bin/bash (inside WSL2)
  Binaries:
    Node: 22.11.0
    npm: 10.9.1
  Browsers:
    Firefox: 133.0 (64-bit)
  npmPackages:
    react-router-dom: ^7.0.1
    vite: ^5.4.11

[brookslybrand]

It looks like react-router has a development and production bundle for. For some reason when @clerk/react-router imports useNavigate it's using the production one, which is why it's not finding a <Router> because the context identifier it's looking for is different.

Whether or not this an issue with how we've setup the packages or is something that can easily be resolved by how you're setting up the @clerk/react-router package, I don't know. At this point it's a bit outside my knowledge, so I'll pass it along to the team

[LekoArts]

For my reproduction repository above (and another testing site) the PR #12437 resolved our problem described in this issue.

I know it's a stopgap but it works. So feel free to close the issue 👍

[brookslybrand]

Perfect, thanks @LekoArts for helping identify the issue. Now that we know to look for it we shouldn't have a regression, but if we ever do please reach out 🙏

Resolved by #12437

[acelaya]

I see this was closed, but I'm still experiencing this issue with react-router 7.0.2

Surprisingly, it happens only with node 23.x, but works as expected with 20.x and 22.x

[brookslybrand]

I see this was closed, but I'm still experimenting this issue with react-router 7.0.2

Surprisingly, it happens only with node 23.x, but works as expected with 20.x and 22.x

Yep, I am also surprised by this. I opened #12475 last week and the team is aware.

[linkm-ampere]

Seeing this with
react-router @7.0.2
nodejs @20.18.1
also running on latest macos, if that matters.

seems to be still a problem when accessing the hook from a component.

[johncmacy]

I'm also seeing this, with:

System:
    OS: macOS 15.1.1
  Binaries:
    Node: 22.12.0
  npmPackages:
    @clerk/react-router: ^0.1.1 => 0.1.1
    @react-router/dev: ^7.0.0 => 7.0.2 
    @react-router/node: ^7.0.0 => 7.0.2 
    @react-router/serve: ^7.0.0 => 7.0.2
    vite: ^5.1.0 => 5.4.11

[ZeldOcarina]

Perfect, thanks @LekoArts for helping identify the issue. Now that we know to look for it we shouldn't have a regression, but if we ever do please reach out 🙏

Resolved by #12437

Can we reopen this too?

[brookslybrand]

@ZeldOcarina I'm going to keep this one closed since we have #12475 open now to track this issue

[ZeldOcarina]

Got it thanks! :)