[Bug]: Getting a "useNavigation must be used within a DataRouterStateContext" when using BrowserRouter

See original GitHub issue

What version of React Router are you using?

6.4.1

Steps to Reproduce

We use a custom built routing system (Using Fable/F#, want type-safe routes, etc) which is based on having BrowserRouter/NativeRouter as a top level wrapper of the app, and useHistory/useLocation hooks internally to figure out the current route and to do navigation. Now I’m attempting to upgrade to v6, and having done the requisite updates to useNavigation, the app compiles, but when running it in the browser, fails with

useNavigation must be used within a DataRouterStateContext

on the console. I read through the docs and a bunch of the react-router implementation code. It seems that the context in question is created by the RouterProvider component, which takes an instance of router as a prop. One can get hands on such an instance when using the create.* series of functions, but while there’s a createBrowserRouter, there isn’t one for NativeRouter, so it seems like this is a no go as far as an upgrade path for us. Still, there seem to be plenty examples of BrowserRouter in the codebase, so I assume it should still work. How do I get the DataRouterStateContext created in this setup?

Expected Behavior

Either everything just works, with the DataRouterStateContext is created by BrowserRouter/NativeRouter internally, or a clear instruction is given in the docs on to how create it manually.

Actual Behavior

As described above.

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:2
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
timdorrcommented, Oct 5, 2022

You want useLocation.

0reactions
bracocommented, Oct 5, 2022

Getting this error too.

@brophdawg11 is there some equivalent to navigation.location that would let you get the current path of a BrowserRouter or HashRouter and normalize the difference?

ie /foo on BrowserRouter and /#/foo on HashRouter would both yield “/foo”

Read more comments on GitHub >

github_iconTop Results From Across the Web

usenavigation must be used within a data router statecontext
remix-run/react-router[Bug]: Getting a "useNavigation must be used within a DataRouterStateContext" when using BrowserRouter#9323. Created 3 months ago.
Read more >
React Router Error: useNavigation must be used within a data ...
The useNavigation hook is a Data Router only hook. You are not using a Data router, but rather you are using the regular...
Read more >
[Bug]: How to navigate outside React context in v6? #8264
In v6 docs, it mentions that we can use useNavigate() hook to do navigation, similar to in v5 we directly use useHistory() hook....
Read more >
usenavigate may be used only in the context of router
The error "useNavigate() may be used only in the context of a Router component" occurs when we try to use the useNavigate hook...
Read more >
Why you should not use useNavigation - Bam Tech
Deep dive in React Navigation typing with typescript. Behind its nice API, useNavigation may be a source of trouble.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found