[Bug]: Getting a "useNavigation must be used within a DataRouterStateContext" when using BrowserRouter
See original GitHub issueWhat 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:
- Created a year ago
- Reactions:2
- Comments:6 (3 by maintainers)
Top Related StackOverflow Question
You want
useLocation.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”