xenial-black•7h ago

useLocation() issue when migrating 4.x.x to 5.x.x

Aftre migrating from 4.x.x to 5.x.x and fixing all typescript issues and applying the manual fixes as per the migration guide, I ended up with an error of useLocation() may be used only in the context of a <Router> component.. The stacktrace is as follows:

at invariant (@refinedev_react-router.js?v=640b1eb2:378:11)
at useLocation (@refinedev_react-router.js?v=640b1eb2:865:3)
at parse (@refinedev_react-router.js?v=640b1eb2:2644:53)
at useParse (chunk-6VFCO6TG.js?v=640b1eb2:9728:132)
at useParsed (chunk-6VFCO6TG.js?v=640b1eb2:9731:11)
at useResource (chunk-6VFCO6TG.js?v=640b1eb2:9743:66)
at useResourceParams (chunk-6VFCO6TG.js?v=640b1eb2:9759:106)
at useList (chunk-6VFCO6TG.js?v=640b1eb2:9043:57)
at OrganizationalUnitProvider (OrganizationalUnitProvider.tsx:16:30)

at invariant (@refinedev_react-router.js?v=640b1eb2:378:11)
at useLocation (@refinedev_react-router.js?v=640b1eb2:865:3)
at parse (@refinedev_react-router.js?v=640b1eb2:2644:53)
at useParse (chunk-6VFCO6TG.js?v=640b1eb2:9728:132)
at useParsed (chunk-6VFCO6TG.js?v=640b1eb2:9731:11)
at useResource (chunk-6VFCO6TG.js?v=640b1eb2:9743:66)
at useResourceParams (chunk-6VFCO6TG.js?v=640b1eb2:9759:106)
at useList (chunk-6VFCO6TG.js?v=640b1eb2:9043:57)
at OrganizationalUnitProvider (OrganizationalUnitProvider.tsx:16:30)

The code that has worked before in 4.x.x and does not work in 5.x.x that is connected to this is: - I first create a router https://gist.github.com/andrulonis/c527b6116d69612c93d8d444cb9b6b4e - then return a RouterProvider with it

    return (
        <RouterProvider
            router={router}
        />
    );

    return (
        <RouterProvider
            router={router}
        />
    );

- that is then used in the App for everything as normal - the OrganizationalUnitProvider (this is where useList() is called):

 
export function OrganizationalUnitProvider({ children }: PropsWithChildren) {
    const { keycloak } = useKeycloak();

    const { result: data } = useList<OrganizationalUnit, HttpError>({
        resource: 'organizational-units',
        pagination: {
            pageSize: 100,
        },
        queryOptions: {
            enabled: keycloak.authenticated,
        },
        meta: {
            organizationalUnitId: null,
        },
    });
    ...
}

 
export function OrganizationalUnitProvider({ children }: PropsWithChildren) {
    const { keycloak } = useKeycloak();

    const { result: data } = useList<OrganizationalUnit, HttpError>({
        resource: 'organizational-units',
        pagination: {
            pageSize: 100,
        },
        queryOptions: {
            enabled: keycloak.authenticated,
        },
        meta: {
            organizationalUnitId: null,
        },
    });
    ...
}

As mentioned, this has worked in the same exact way in 4.x.x and in the migration there was nothing mentioned about useLocation() that corresponds to this issue. Help with resolving the error would be greatly appreciated - not sure whether its the new version issue or it is something on my end.

Gist

gist:c527b6116d69612c93d8d444cb9b6b4e

GitHub Gist: instantly share code, notes, and snippets.

3 Replies

kapa.ai•7h ago

Hi @andrulonis. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error useLocation() may be used only in the context of a <Router> component. indicates that a hook from React Router (or Refine's router integration) is being called outside of a router context. This is a common issue when the component tree that uses routing hooks is not wrapped in a <Router> (such as <BrowserRouter> or <RouterProvider>). Key points from the migration guide and documentation: - In Refine v5, you must ensure that your entire app (including all components using routing hooks like useList, which internally uses useLocation) is rendered within a router context. This can be either <BrowserRouter> or <RouterProvider>, depending on your setup. - The migration to v5 removes legacy router providers and expects you to use the new router provider system, which gives you full control over route creation and nesting. You must manually ensure that your routes and providers are set up correctly and that all components using routing hooks are descendants of the router provider in the React tree Refine v5 migration guide React Router integration. What could be wrong in your case: - If your OrganizationalUnitProvider (or any component using useList/useLocation) is rendered outside the <RouterProvider>, you will get this error. - Double-check that your component tree is structured so that all Refine hooks that depend on routing are children of the router provider. Example of correct structure (using <RouterProvider>):

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
const router = createBrowserRouter([
  {
    Component: RefineProvider,
    children: [
      // ... your routes
    ],
  },
]);

const App = () => <RouterProvider router={router} />;

const RefineProvider = () => (
  <Refine
    routerProvider={routerProvider}
    // ...other props
  >
    <OrganizationalUnitProvider>
      <Outlet />
    </OrganizationalUnitProvider>
  </Refine>
);

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
const router = createBrowserRouter([
  {
    Component: RefineProvider,
    children: [
      // ... your routes
    ],
  },
]);

const App = () => <RouterProvider router={router} />;

const RefineProvider = () => (
  <Refine
    routerProvider={routerProvider}
    // ...other props
  >
    <OrganizationalUnitProvider>
      <Outlet />
    </OrganizationalUnitProvider>
  </Refine>
);

Make sure that OrganizationalUnitProvider is rendered inside the Refine component, which itself is inside the router context. Summary of what to check: - All components using Refine hooks that depend on routing must be rendered inside the router context (<RouterProvider> or <BrowserRouter>). - Do not render providers or hooks outside of this context. - If you have custom providers, ensure they are nested correctly. If you follow this structure and still encounter the error, double-check for any accidental renderings of components outside the router context, especially in your entry point or layout components. References:
Refine v5 migration guide
React Router integration: Basic Usage ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7h ago

<@162291962563526656> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

xenial-blackOP•7h ago

@contributor I would love your help here as I reckon AI may not be up to date with the migration yet and it seems like a very specific issue as well

useLocation() issue when migrating 4.x.x to 5.x.x

Did you find this page helpful?