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.

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

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

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)

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}
        />
    );

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

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

- that is then used in the App for everything as normal
- the

OrganizationalUnitProvider

OrganizationalUnitProvider

OrganizationalUnitProvider

OrganizationalUnitProvider (this is where

useList()

useList()

useList()

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,
        },
    });
    ...
}

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()

useLocation()

useLocation()

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.

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

Similar Threads

Similar Threads

Similar Threads