[BUG] useLocation() migration 4.x.x to 5.x.x error

[andrulonis]

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

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:

const router = createBrowserRouter([
        {
            element: (
                <Box sx={{ '& main': { p: 0, transform: 'translateX(0)', height: 'calc(100vh - 64px)' }, '& main > div:first-of-type': { height: 'calc(100vh - 64px)' } }}>
                    <RefineSnackbarProvider anchorOrigin={{
                        vertical: 'bottom',
                        horizontal: 'right',
                    }}
                    >
                        <Refine
                            routerProvider={routerBindings}
                            dataProvider={dp}
                            notificationProvider={useNotificationProvider}
                            accessControlProvider={acp}
                            authProvider={ap}
                            i18nProvider={i18nProvider}
                            options={{
                                syncWithLocation: true,
                                warnWhenUnsavedChanges: true,
                                projectId: '<projectID>',
                                disableTelemetry: true,
                            }}
                            resources={resources}
                        >
                            <OrganizationalUnitProvider>
                            ...
                            </OrganizationalUnitProvider>
                        </Refine>
                    </RefineSnackbarProvider>
                </Box>
            ),
            children: createRoutesFromElements(
                <> //Routes
                    ...
                </>
            ),
        },
    ]);

• then return a RouterProvider with it

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

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.

Steps To Reproduce

1. Migrate to 5.x.x
2. Create Router with a component that internally depends on useLocation()
3. Use it in the main App inside Router

Expected behavior

No error should appear (useLocation() may be used only in the context of a component.`).

Packages

Binaries:

• Node: 22.19.0 - /usr/local/bin/node
• Yarn: Not Found
• npm: 10.9.3 - /usr/local/bin/npm

Browsers:

• Chrome: 141.0.7390.76

Refine Packages:

• @refinedev/cli: 2.16.49
• @refinedev/core: 5.0.4
• @refinedev/mui: 7.0.0
• @refinedev/react-hook-form: 5.0.1
• @refinedev/react-router: 2.0.1
• @refinedev/simple-rest: 6.0.0
• @refinedev/ui-types: 2.0.0

Additional Context

No response

[alicanerdurmaz]

Hello @andrulonis, thanks for the issue.

Could you provide us with a reproducible example? Our examples are working without any problems, so this seems to be a very edge case. A reproducible example would be really helpful for us to debug.