[DOC] Documenting that `@refinedev/react-router-v6` is working with `<RouterProvider>` also

[sharky98]

Documentation issue

In their v6.4, react-router-dom added an alternative to the Router Components (like the know <BrowserRouter> by using a <RouterProvider> with data API routers.

All documentation of its integration (there are also example code shown here and there) in Refine uses the <BrowserRouter> method.

Describe the thing to improve

The doc should be improved to document the fact that using <RouterProvider>, with a createBrowserRouter() is supported and works out of the box (at least, according to #4715 and my limited usage for now[^1]).

Also, it is not clear how all these data apis interact with the integration, including the loaders, fetchers and actions. They seems to provide features that overlap somewhat with Refine.

[^1]: I don't know if there is some smoke tests for @refinedev/react-router-v6, but maybe adding some more using the <RouterProvider> could be useful?

Describe the solution (optional)

I think a quick win would be to show the Basic Usage example with tabs, one with the current code and one using the <RouterProvider>. Here what it could look like, using the migration guide they provide. I did not test the code, simply applied the migration guide.

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

[BatuhanW]

Hey @sharky98 nice catch! Would you like to submit a PR ?