Open nigellima opened 1 year ago
I bmped into the same issue. Ensuring the QueryParamsProvider
is inside the createBrowserRouter
context should work fine.
My solution was this:
const router = createBrowserRouter([
{
path: '/',
element: (
<QueryParamProvider
adapter={ReactRouter6Adapter}
options={{
searchStringToObject: queryString.parse,
objectToSearchString: queryString.stringify,
}}
>
<Outlet />
</QueryParamProvider>
),
children: [
{
path: '/',
element: <LandingPage />,
},
...
I bmped into the same issue. Ensuring the
QueryParamsProvider
is inside thecreateBrowserRouter
context should work fine.My solution was this:
const router = createBrowserRouter([ { path: '/', element: ( <QueryParamProvider adapter={ReactRouter6Adapter} options={{ searchStringToObject: queryString.parse, objectToSearchString: queryString.stringify, }} > <Outlet /> </QueryParamProvider> ), children: [ { path: '/', element: <LandingPage />, }, ...
This is so weird. Even moving my routes to use createBrowserRouter
is throwing the same error (now showing up in the page instead of console.error). The only thing I could think of was some kind of dependency issue, but I've reinstalled everything
Ok. Now it worked specifically with the version of react-router-dom 6.10.0
. No idea why
For your reference, I use react-router(-dom) `6.14.0'.
So when I used react-router-dom@6.18.0
I started getting the same error, even if the QueryParamProvider
is used inside the RouterProvider
. I downgraded to react-router-dom@6.17.0
and it worked fine. Anyone else having this issue??
I used use-query-params with createBrowserRouter.
const router = createBrowserRouter([
{
path: '/',
element: <LayoutApp />,
children: ROUTES.map((route) => {
return {
path: route.path,
element: route.element,
};
}),
},
]);
export function AppRouter() {
return <RouterProvider router={router} />;
}
export const AppProvider = ({ children }: { children: React.ReactNode }) => {
return (
<React.StrictMode>
<QueryParamProvider adapter={ReactRouter6Adapter}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</QueryParamProvider>
</React.StrictMode>
);
};
export const App = () => {
return (
<AppProvider>
<AppRouter />
</AppProvider>
);
};
and I get same problems after that
I've tried changing versions of react-router-dom and unfortunately it didn't change anything for me
Anyone else having this issue?
The last version of react-router / react-router-dom that doesn't seem to have the issue is 6.9.0
. Anything after that and I start seeing this error.
I'm using a MemoryRouter.
In my case I just needed Outlet
to be a direct child of QueryParamProvider
.
<OutletWrapper>
<QueryParamProvider adapter={ReactRouter6Adapter}>
<Outlet />
</QueryParamProvider>
</OutletWrapper>
So when I used
react-router-dom@6.18.0
I started getting the same error, even if theQueryParamProvider
is used inside theRouterProvider
. I downgraded toreact-router-dom@6.17.0
and it worked fine. Anyone else having this issue??
Just to confirm, im not having any issues anymore, might have been a react-router-dom
issue, that was solved with the latest version.
A workaround for me was to just copy the whole adapter code since the dependencies is quite small and by co-locating it on the same file as the provider, the error doesn't throw
Description
I'm using React 18 with node 18 too (I have tried with 16 and 17 versions too). When using the
ReactRouter6Adapter
I'm getting this error:Uncaught TypeError: Cannot destructure property 'navigator' of '(0 , import_react.useContext)(...)' as it is null.
Versions: node: v18.16.1 react: ^18.2.0 react-router-dom: ^6.14.1 use-query-params: ^2.2.1
I've reinstalled everything, cleared cache... I tried creating a reproducible environment, but it worked fine there. So am I missing something here?