Using createBrowserRouter with @refinedev/react-router-v6 - Refine

kapa.ai

K

kapa.ai•10/8/24, 10:42 PM

Hi @ritute. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai

K

kapa.ai•10/8/24, 10:42 PM

----------------------
To use with , 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()

useLocation()

is not wrapped within a router context. Here's a basic setup that should work:

kapa.ai

K

kapa.ai•10/8/24, 10:42 PM

Make sure that your components that use

useLocation()

useLocation()

are rendered within the context. The component is responsible for providing the router context to its children, so any component that needs to use routing hooks like

useLocation()

useLocation()

should be a descendant of .

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

----------------------

kapa.ai

K

kapa.ai•10/8/24, 10:42 PM

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

brilliant-orange

B

brilliant-orangeOP•10/8/24, 10:43 PM

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

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