Supporting of createBrowserRouter in react router

[JuicyBenjamin]

It seems we are at a bit of a crossroads in the react world especially when it comes to react router. That team is doing so many cool things for their upcoming release of version 7. To make the transition to version 7 easier it seems like they are pushing to use a different router from the that has been normal for us.

This is where the request comes in, because it seems like refine is relying on the old browserRouter and I'm unsure if it breaks if we move towards the createBrowser router that the react-router team recommends.

Thus my question is this, what are the plans for supporting these new router options?

[BatuhanW]

Hello @JuicyBenjamin thanks for taking time to create this post. We'll review it in the next week.

[alicanerdurmaz]

Hello @JuicyBenjamin, thank you for bringing up this topic. 🚀

Refine is designed to be router-agnostic, meaning it can theoretically work with any router library. If an issue comes up, we can quickly add a new routerProvider.

We’re big fans of React Router and are interested in updating our examples to use their latest recommended API. However, we're not looking to adopt it just because it’s "new". createBrowserRouter has some powerful features, and we’re currently exploring how to best integrate these with Refine. Once we find an ideal approach, we’ll update our examples accordingly.

Below is an example using createRouterBrowser, with the base-antd example as a starting point:

import { GitHubBanner, Refine } from "@refinedev/core";
import {
  useNotificationProvider,
  ThemedLayoutV2,
  ErrorComponent,
  RefineThemes,
} from "@refinedev/antd";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, {
  NavigateToResource,
  UnsavedChangesNotifier,
  DocumentTitleHandler,
} from "@refinedev/react-router-v6";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
import { ConfigProvider, App as AntdApp } from "antd";
import "@refinedev/antd/dist/reset.css";

import { PostList, PostCreate, PostEdit, PostShow } from "../src/pages/posts";

const API_URL = "https://api.fake-rest.refine.dev";

const App = () => {
  const router = createBrowserRouter([
    {
      path: "/",
      element: (
        <ConfigProvider theme={RefineThemes.Blue}>
          <AntdApp>
            <GitHubBanner />
            <Refine
              routerProvider={routerProvider}
              dataProvider={dataProvider(API_URL)}
              resources={[
                {
                  name: "posts",
                  list: "/posts",
                  show: "/posts/show/:id",
                  create: "/posts/create",
                  edit: "/posts/edit/:id",
                  meta: {
                    canDelete: true,
                  },
                },
              ]}
              notificationProvider={useNotificationProvider}
              options={{
                syncWithLocation: true,
                warnWhenUnsavedChanges: true,
              }}
            >
              <ThemedLayoutV2>
                <Outlet />
              </ThemedLayoutV2>
              <UnsavedChangesNotifier />
              <DocumentTitleHandler />
            </Refine>
          </AntdApp>
        </ConfigProvider>
      ),
      children: [
        {
          index: true,
          element: <NavigateToResource />,
        },
        {
          path: "posts",
          children: [
            {
              index: true,
              element: <PostList />,
              loader: async () => {
                console.log("loading posts");

                return await dataProvider(API_URL).getList({
                  resource: "posts",
                  pagination: { mode: "off" },
                });
              },
            },
            {
              path: "create",
              element: <PostCreate />,
            },
            {
              path: "edit/:id",
              element: <PostEdit />,
            },
            {
              path: "show/:id",
              element: <PostShow />,
            },
          ],
        },
        {
          path: "*",
          element: <ErrorComponent />,
        },
      ],
    },
  ]);

  return <RouterProvider router={router} />;
};

export default App;