useLocation error
I am receiving the following error after upgrading to React Router v7:
I followed the migration guide published here: https://refine.dev/docs/routing/integrations/react-router/migration-guide-v6-to-v7/#package-changes
My App.tsx setup looks like this:
useLocation() may be used only in the context of a <Router> componentuseLocation() may be used only in the context of a <Router> componentI followed the migration guide published here: https://refine.dev/docs/routing/integrations/react-router/migration-guide-v6-to-v7/#package-changes
My App.tsx setup looks like this:
import { Refine, ResourceProps } from '@refinedev/core';
import { createBrowserRouter, Outlet, RouteObject, RouterProvider } from 'react-router';
import routerProvider, { NavigateToResource } from '@refinedev/react-router';
const RefineProvider = () => {
const [colorMode, _] = useState<'dark' | 'light'>('dark');
return (
<ThemeProvider theme={customTheme(colorMode)}>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: 'auto' } }} />
<RefineSnackbarProvider>
<Refine
options={{ disableTelemetry: true }}
dataProvider={dataProvider}
authProvider={authProvider}
routerProvider={routerProvider}
accessControlProvider={{
can: async ({ resource, action }) => {
const jwt = getJwt();
const isAdmin = jwtIsAdminRole(jwt);
const adminRoles = getJwtRoles(jwt);
if (!resource || adminRoles.length === 0 || !isAdmin) return { can: false };
const roleAbility = defineAbilityFor(adminRoles[0]);
return { can: roleAbility.can(action as ACLAction, resource as ACLSubject) };
},
}}
notificationProvider={useNotificationProvider}
resources={[...]}
>
<Outlet />
</Refine>
</RefineSnackbarProvider>
</ThemeProvider>
);
};
const routerConfig = createBrowserRouter([
{
path: '/',
Component: RefineProvider,
errorElement: <ErrorPage />,
children: [
{ index: true, element: <NavigateToResource resource={apiResources.main?.path} /> }, // After login, land here via "redirectTo" in authProvider/login
{ path: 'login', element: <Login /> }, // After login, follows "redirectTo" in authProvider/login
{ path: 'landing', element: <LandingPage /> }, // After logout, land here via "redirectTo" in authProvider/logout
{
element: <AuthenticatedRoutes />,
children: [
...Object.entries(apiResources).map(([_, v]) => routeFromNav(v)),
// Other routes not derived from apiResource map
],
},
],
},
]);
function App() {
return <RouterProvider router={routerConfig} />;
}import { Refine, ResourceProps } from '@refinedev/core';
import { createBrowserRouter, Outlet, RouteObject, RouterProvider } from 'react-router';
import routerProvider, { NavigateToResource } from '@refinedev/react-router';
const RefineProvider = () => {
const [colorMode, _] = useState<'dark' | 'light'>('dark');
return (
<ThemeProvider theme={customTheme(colorMode)}>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: 'auto' } }} />
<RefineSnackbarProvider>
<Refine
options={{ disableTelemetry: true }}
dataProvider={dataProvider}
authProvider={authProvider}
routerProvider={routerProvider}
accessControlProvider={{
can: async ({ resource, action }) => {
const jwt = getJwt();
const isAdmin = jwtIsAdminRole(jwt);
const adminRoles = getJwtRoles(jwt);
if (!resource || adminRoles.length === 0 || !isAdmin) return { can: false };
const roleAbility = defineAbilityFor(adminRoles[0]);
return { can: roleAbility.can(action as ACLAction, resource as ACLSubject) };
},
}}
notificationProvider={useNotificationProvider}
resources={[...]}
>
<Outlet />
</Refine>
</RefineSnackbarProvider>
</ThemeProvider>
);
};
const routerConfig = createBrowserRouter([
{
path: '/',
Component: RefineProvider,
errorElement: <ErrorPage />,
children: [
{ index: true, element: <NavigateToResource resource={apiResources.main?.path} /> }, // After login, land here via "redirectTo" in authProvider/login
{ path: 'login', element: <Login /> }, // After login, follows "redirectTo" in authProvider/login
{ path: 'landing', element: <LandingPage /> }, // After logout, land here via "redirectTo" in authProvider/logout
{
element: <AuthenticatedRoutes />,
children: [
...Object.entries(apiResources).map(([_, v]) => routeFromNav(v)),
// Other routes not derived from apiResource map
],
},
],
},
]);
function App() {
return <RouterProvider router={routerConfig} />;
}In this guide, we will cover the breaking changes of @refinedev/react-router-v6 and how to migrate your project to @refinedev/react-router with react-router v7.
