foreign-sapphire•5mo ago

Using createBrowserRouter with @refinedev/react-router-v6

Has anyone managed to get this working? I'm getting an error thrown that useLocation() needs to be used within a Router context even though createBrowserRouter is creating one.

3 Replies

kapa.ai•5mo ago

Hi @ritute. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use createBrowserRouter with @refinedev/react-router-v6, you need to ensure that your application is set up correctly to provide the necessary router context. The error you're encountering typically indicates that the component using useLocation() is not wrapped within a router context. Here's a basic setup that should work:

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/react-router-v6";  
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";  
  
import { PostList, PostCreate } from "pages/posts";  
import { CategoryList, CategoryShow } from "pages/categories";  
  
const router = createBrowserRouter([  
  {  
    Component: RefineProvider,  
    children: [  
      {  
        path: "posts",  
        children: [  
          { index: true, Component: PostList },  
          { path: "create", Component: PostCreate },  
        ],  
      },  
      {  
        path: "categories",  
        children: [  
          { index: true, Component: CategoryList },  
          { path: "show/:id", Component: CategoryShow },  
        ],  
      },  
    ],  
  },  
]);  
  
const App = () => {  
  return <RouterProvider router={router} />;  
};  
  
const RefineProvider = () => {  
  return (  
    <Refine  
      dataProvider={dataProvider}  
      routerProvider={routerProvider}  
      resources={[  
        {  
          name: "posts",  
          list: "/posts",  
          create: "/posts/create",  
        },  
        {  
          name: "categories",  
          list: "/categories",  
          show: "/categories/show/:id",  
        },  
      ]}  
    >  
      <Outlet />  
    </Refine>  
  );  
}

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/react-router-v6";  
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";  
  
import { PostList, PostCreate } from "pages/posts";  
import { CategoryList, CategoryShow } from "pages/categories";  
  
const router = createBrowserRouter([  
  {  
    Component: RefineProvider,  
    children: [  
      {  
        path: "posts",  
        children: [  
          { index: true, Component: PostList },  
          { path: "create", Component: PostCreate },  
        ],  
      },  
      {  
        path: "categories",  
        children: [  
          { index: true, Component: CategoryList },  
          { path: "show/:id", Component: CategoryShow },  
        ],  
      },  
    ],  
  },  
]);  
  
const App = () => {  
  return <RouterProvider router={router} />;  
};  
  
const RefineProvider = () => {  
  return (  
    <Refine  
      dataProvider={dataProvider}  
      routerProvider={routerProvider}  
      resources={[  
        {  
          name: "posts",  
          list: "/posts",  
          create: "/posts/create",  
        },  
        {  
          name: "categories",  
          list: "/categories",  
          show: "/categories/show/:id",  
        },  
      ]}  
    >  
      <Outlet />  
    </Refine>  
  );  
}

Make sure that your components that use useLocation() are rendered within the RouterProvider context. The RouterProvider component is responsible for providing the router context to its children, so any component that needs to use routing hooks like useLocation() should be a descendant of RouterProvider. For more detailed information, you can refer to the Refine documentation on using RouterProvider (https://refine.dev/docs/routing/integrations/react-router/#basic-usage) and the React Router documentation (https://reactrouter.com/en/main/routers/router-provider). If you continue to experience issues, double-check that all components using routing hooks are indeed within the router context and that there are no mismatches in the versions of the libraries you are using. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@1243925652688605204> kapa.ai is still learning and improving, please let us know how it did by reacting below

foreign-sapphireOP•5mo ago

i've already tried this and i'm still getting the useLocation error

Using createBrowserRouter with @refinedev/react-router-v6

Did you find this page helpful?