complex-teal•3w ago

useLocation error

I am receiving the following error after upgrading to React Router v7: useLocation() may be used only in the context of a <Router> component 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:

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

Migration Guide from v6 to v7 | Refine

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.

5 Replies

kapa.ai•3w ago

Hi @Nitai. 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 typically means that a component using useLocation is being rendered outside the context of a React Router <Router> (such as <RouterProvider> or <BrowserRouter>). Based on your code and the migration guide you followed, your setup with React Router v7 and Refine appears correct: you are using createBrowserRouter and wrapping your app with <RouterProvider router={routerConfig} />, which is the recommended approach for React Router v7 and @refinedev/react-router integration Migration Guide v6 to v7 Basic Usage. Potential causes and solutions: 1. Component Placement:
Ensure that any component using useLocation (directly or indirectly, e.g., via Refine hooks or providers) is rendered as a descendant of <RouterProvider>. In your setup, the RefineProvider is used as the Component for the root route, which is correct. However, if you have any components (including context providers) that use useLocation and are rendered outside of RefineProvider or before <RouterProvider>, this error will occur. 2. Provider Placement:
Double-check that you are not rendering any Refine hooks or components that use routing (like useLocation, useNavigation, etc.) outside the <RouterProvider>. All such hooks/components must be within the router context. 3. Correct Imports:
With React Router v7, all router components and hooks should be imported from the react-router package, not react-router-dom (as per the migration guide) Migration Guide v6 to v7. 4. No Nested Routers:
Make sure you are not accidentally nesting another router (like <BrowserRouter>) inside or outside <RouterProvider>, as this can cause context issues. Example of correct structure:

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router";

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

const router = createBrowserRouter([
  {
    Component: RefineProvider,
    children: [
      // your routes
    ],
  },
]);

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

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router";

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

const router = createBrowserRouter([
  {
    Component: RefineProvider,
    children: [
      // your routes
    ],
  },
]);

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

Basic Usage Summary:
Your code structure matches the recommended approach. The error suggests that somewhere in your component tree, a component using useLocation is rendered outside the <RouterProvider>. Double-check all providers and components to ensure they are within the router context. If you still encounter issues, try simplifying your tree to the minimal example above and add components back incrementally to isolate the problem. If you need more specific help, please provide details about where useLocation is being called, or share the full component tree if possible. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

complex-tealOP•3w ago

@kapa.ai In addition to that, why am I receving these warnings for <Outlet /> and <RouterProvider ... /> : "'Outlet' cannot be used as a JSX component. Its type '(props: OutletProps) => ReactElement<unknown, string | JSXElementConstructor<any>> | null' is not a valid JSX element type." "'RouterProvider' cannot be used as a JSX component. Its type '({ router, flushSync: reactDomFlushSyncImpl, }: RouterProviderProps) => ReactElement<unknown, string | JSXElementConstructor<any>>' is not a valid JSX element type." And are those related to my original question?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The warnings you are seeing for <Outlet /> and <RouterProvider ... />—specifically, that they "cannot be used as a JSX component"—are TypeScript errors indicating that the types for these components are not being recognized as valid JSX element types. Are these warnings related to your original useLocation error?
No, these TypeScript warnings are not directly related to the runtime error about useLocation(). The useLocation error is about React Router context at runtime, while these warnings are about TypeScript not recognizing the types of certain components at compile time. Why do these warnings occur?
According to the migration guide, with React Router v7, you should import all router components (including Outlet and RouterProvider) from the react-router package, not from react-router-dom. If you import them from the wrong package, or if your TypeScript configuration or dependencies are mismatched, TypeScript may not recognize them as valid JSX components. What to check: - Correct Imports:
Make sure you are importing both Outlet and RouterProvider from "react-router":

  import { Outlet, RouterProvider } from "react-router";

  import { Outlet, RouterProvider } from "react-router";

This is explicitly mentioned in the migration guide and in the basic usage documentation. - Dependencies:
Ensure you have uninstalled react-router-dom and are only using react-router v7+ as per the migration guide:

  npm uninstall react-router-dom
  npm install react-router

  npm uninstall react-router-dom
  npm install react-router

Migration Guide v6 to v7 - TypeScript Version:
The knowledge sources do not mention a required TypeScript version, but using an outdated TypeScript version can sometimes cause these issues. Summary:
These TypeScript warnings are not related to your original useLocation runtime error, but they do indicate a problem with your imports or dependencies. Double-check that you are importing from "react-router" and that your dependencies match the migration guide. If the problem persists after correcting imports and dependencies, it may be a local TypeScript configuration issue, but the knowledge sources do not provide further troubleshooting steps for that. For more details, see the migration guide and basic usage example. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

useLocation error

Did you find this page helpful?