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.
useLocation() is not wrapped within a router context. Here's a basic setup that should work: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() should be a descendant of .createBrowserRouter@refinedev/react-router-v6RouterProviderRouterProviderRouterProviderimport { 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>
);
}