feat: upgrade React Router to v7 (#6556) (resolves #6520)

.changeset/calm-coins-film.md

@@ -0,0 +1,11 @@
+---
+"@refinedev/react-router": major
+---
+
+feat: Add `@refinedev/react-router` package. #6520
+
+`@refinedev/react-router-v6` is renamed to `@refinedev/react-router` to support React Router v7.
+
+See the [migration guide React Router v6 to v7](https://refine.dev/docs/routing/integrations/react-router/migration-guide-v6-to-v7) for more information.
+
+Resolves [#6520](https://github.com/refinedev/refine/issues/6520)

.changeset/quiet-dragons-drop.md

@@ -0,0 +1,22 @@
+---
+"@refinedev/chakra-ui": patch
+"@refinedev/mantine": patch
+"@refinedev/antd": patch
+"@refinedev/mui": patch
+"@refinedev/cli": patch
+"@refinedev/devtools": patch
+"@refinedev/devtools-internal": patch
+"@refinedev/devtools-server": patch
+"@refinedev/devtools-shared": patch
+"@refinedev/devtools-ui": patch
+"@refinedev/kbar": patch
+"@refinedev/nextjs-router": patch
+"@refinedev/react-hook-form": patch
+"@refinedev/react-table": patch
+"@refinedev/ui-tests": patch
+"@refinedev/inferencer": patch
+---
+
+feat: React Router v7 support added.
+
+🚨 These packages are not dependent on `react-router`. However, they use the `react-router` package for testing purposes on [Jest](https://jestjs.io/) environment.

.changeset/sour-ducks-shave.md

@@ -0,0 +1,32 @@
+---
+"@refinedev/codemod": minor
+---
+
+feat: React Router v6 to v7 codemod added.
+
+For `@refinedev/react-router-v6` to `@refinedev/react-router`:
+
+```bash
+npx @refinedev/codemod@latest refine-react-router-v6-to-refine-react-router
+```
+
+```diff
+ import routerProvider, { NavigateToResource, UnsavedChangesNotifier, DocumentTitleHandler }
+- from "@refinedev/react-router-v6";
+ import routerProvider, { NavigateToResource, UnsavedChangesNotifier, DocumentTitleHandler }
++ from "@refinedev/react-router";
+
+```
+
+For `react-router-dom` to `react-router`:
+
+```bash
+npx @refinedev/codemod@latest react-router-dom-to-react-router"
+```
+
+```diff
+-import { RouterProvider } from "react-router-dom";
++import { RouterProvider } from "react-router";
+```
+
+See the [migration guide React Router v6 to v7](https://refine.dev/docs/routing/integrations/react-router/migration-guide-v6-to-v7) for more information.

.codesandbox/ci.json

@@ -8,7 +8,7 @@
     "packages/nextjs-router",
     "packages/react-hook-form",
     "packages/react-location",
-    "packages/react-router-v6",
+    "packages/react-router",
     "packages/react-table",
     "packages/simple-rest"
   ],

.github/workflows/scripts/build-example-chunks.js

@@ -5,7 +5,12 @@ const path = require("path");
 const { execSync } = require("child_process");
 
 const EXAMPLES_DIR = "./examples";
-const ignoredRegexes = [/^monorepo-/, /^with-nx/, /with-nextjs-headless/];
+const ignoredRegexes = [
+  /^monorepo-/,
+  /^with-nx/,
+  /with-nextjs-headless/,
+  /^blog-/,
+];
 const CHUNK_COUNT = Number(process.env.CHUNKS ? process.env.CHUNKS : 1);
 const BASE_REF = process.env.BASE_REF ? process.env.BASE_REF : "main";
 const BUILD_ALL_EXAMPLES = process.env.BUILD_ALL_EXAMPLES === "true";

.nxignore

@@ -39,3 +39,6 @@ examples/with-nx
 examples/with-remix-mui
 examples/with-storybook-mui
 examples/with-vite
+examples/mern-dashboard-client
+examples/with-nextjs-headless
+examples/blog-*

documentation/blog/2023-01-17-airtable-crud-app.md

@@ -181,7 +181,7 @@ the `resources` property accepts an array of objects with each object specifying
 import { Refine } from "@refinedev/core";
 import dataProvider from "@refinedev/simple-rest";
 // highlight-start
-import routerProvider from "@refinedev/react-router-v6";
+import routerProvider from "@refinedev/react-router";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 // highlight-end
 
@@ -244,7 +244,7 @@ import dataProvider from "@refinedev/airtable";
 import routerBindings, {
   DocumentTitleHandler,
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import "./App.css";
 
@@ -383,7 +383,7 @@ import routerBindings, {
   DocumentTitleHandler,
   NavigateToResource,
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 
 import { PostList } from "./pages/post/list";

documentation/blog/2023-01-23-redwood-vs-refine.md

@@ -117,7 +117,7 @@ import {
 import "@refinedev/antd/dist/reset.css";
 
 import dataProvider from "@refinedev/simple-rest";
-import routerProvider from "@refinedev/react-router-v6";
+import routerProvider from "@refinedev/react-router";
 
 function App() {
   return (
@@ -219,7 +219,7 @@ import {
 import "@refinedev/antd/dist/reset.css";
 
 import dataProvider from "@refinedev/simple-rest";
-import routerProvider from "@refinedev/react-router-v6";
+import routerProvider from "@refinedev/react-router";
 
 import { TestList } from "pages/tests";
 
@@ -405,7 +405,7 @@ import {
 import "@refinedev/antd/dist/reset.css";
 
 import dataProvider from "@refinedev/simple-rest";
-import routerProvider from "@refinedev/react-router-v6";
+import routerProvider from "@refinedev/react-router";
 
 import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";
 
@@ -832,7 +832,7 @@ import {
   ErrorComponent,
 } from "@refinedev/antd";
 import dataProvider from "@refinedev/simple-rest";
-import routerProvider from "@refinedev/react-router-v6";
+import routerProvider from "@refinedev/react-router";
 
 import { useAuth0 } from "@auth0/auth0-react";
 import axios from "axios";

documentation/blog/2023-02-14-refine-pixels-1.md

@@ -68,7 +68,7 @@ Everything in **Refine** is centered around the [`<Refine />`](https://refine.de
 ```tsx title="App.tsx"
 import { Refine } from "@refinedev/core";
 import dataProvider from "@refinedev/simple-rest";
-import routerProvider from "@refinedev/react-router-v6";
+import routerProvider from "@refinedev/react-router";
 import { liveProvider } from "@refinedev/supabase";
 import authProvider from "./authProvider";
 

documentation/blog/2023-02-15-refine-pixels-2.md

@@ -99,7 +99,7 @@ import "@refinedev/antd/dist/reset.css";
 import routerBindings, {
   DocumentTitleHandler,
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { dataProvider, liveProvider } from "@refinedev/supabase";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import authProvider from "./authProvider";

documentation/blog/2023-02-16-refine-pixels-3.md

@@ -229,7 +229,7 @@ import "@refinedev/antd/dist/reset.css";
 import routerBindings, {
   DocumentTitleHandler,
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { dataProvider, liveProvider } from "@refinedev/supabase";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import authProvider from "./authProvider";
@@ -338,7 +338,7 @@ After creating files above you need to add some imports and [routes](/docs/packa
 import { GitHubBanner, Refine, Authenticated } from "@refinedev/core";
 import { useNotificationProvider, ErrorComponent } from "@refinedev/antd";
 import { dataProvider, liveProvider } from "@refinedev/supabase";
-import routerBindings, { NavigateToResource } from "@refinedev/react-router-v6";
+import routerBindings, { NavigateToResource } from "@refinedev/react-router";
 import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 import { ConfigProvider } from "antd";
 import { GithubOutlined } from "@ant-design/icons";
@@ -644,7 +644,7 @@ Let's look at the routes implementation:
 
 ```tsx title="src/components/layout/header/index.tsx"
 import { Refine, Authenticated } from "@refinedev/core";
-import routerBindings, { NavigateToResource } from "@refinedev/react-router-v6";
+import routerBindings, { NavigateToResource } from "@refinedev/react-router";
 import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 import { GithubOutlined } from "@ant-design/icons";
 import { AuthPage } from "./pages/auth";
@@ -1206,7 +1206,7 @@ Namely, authentication related routing has been added:
 
 ```tsx title="src/App.tsx"
 import { Refine, Authenticated } from "@refinedev/core";
-import routerBindings, { NavigateToResource } from "@refinedev/react-router-v6";
+import routerBindings, { NavigateToResource } from "@refinedev/react-router";
 import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 import { GithubOutlined } from "@ant-design/icons";
 import { AuthPage } from "./pages/auth";
@@ -1309,7 +1309,7 @@ Remember, we've already replaced `App.tx` code with the following:
 import { GitHubBanner, Refine, Authenticated } from "@refinedev/core";
 import { useNotificationProvider, ErrorComponent } from "@refinedev/antd";
 import { dataProvider, liveProvider } from "@refinedev/supabase";
-import routerBindings, { NavigateToResource } from "@refinedev/react-router-v6";
+import routerBindings, { NavigateToResource } from "@refinedev/react-router";
 import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 import { ConfigProvider } from "antd";
 import { GithubOutlined } from "@ant-design/icons";
@@ -1480,7 +1480,7 @@ Now it's time to focus on the Home page of our application. We put the `<CanvasF
 
 ```tsx title="App.tsx"
 import { Refine } from "@refinedev/core";
-import routerBindings from "@refinedev/react-router-v6";
+import routerBindings from "@refinedev/react-router";
 import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 import { Layout } from "./components/layout";
 import { CanvasFeaturedList } from "./pages/canvases";

documentation/blog/2023-02-18-refine-pixels-5.md

@@ -87,7 +87,7 @@ import "@refinedev/antd/dist/reset.css";
 import routerBindings, {
   DocumentTitleHandler,
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { dataProvider, liveProvider } from "@refinedev/supabase";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import authProvider from "./authProvider";
@@ -192,7 +192,7 @@ import routerBindings, {
   NavigateToResource,
   UnsavedChangesNotifier,
   DocumentTitleHandler,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 
 import "@refinedev/antd/dist/reset.css";
@@ -529,7 +529,7 @@ After adding resources we need to create routes for them. For the routes, we'll
 
 import { Authenticated, CanAccess, Refine } from "@refinedev/core";
 import { ErrorComponent, ThemedLayoutV2 } from "@refinedev/antd";
-import routerBindings, { NavigateToResource } from "@refinedev/react-router-v6";
+import routerBindings, { NavigateToResource } from "@refinedev/react-router";
 import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 
 import { CanvasList, UserList } from "./pages";
@@ -629,7 +629,7 @@ import routerBindings, {
   NavigateToResource,
   UnsavedChangesNotifier,
   DocumentTitleHandler,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 
 import "@refinedev/antd/dist/reset.css";

documentation/blog/2023-02-23-refine-strapi-mantine.md

@@ -296,7 +296,7 @@ import routerBindings, {
   UnsavedChangesNotifier,
   DocumentTitleHandler,
   CatchAllNavigate,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { BrowserRouter, Route, Routes, Outlet } from "react-router-dom";
 import {
   MantineProvider,

documentation/blog/2023-03-03-ra-chakra-tutorial.md

@@ -43,7 +43,7 @@ The [`<Refine/>`](https://refine.dev/docs/api-reference/core/components/refine-c
 ```tsx title="src/App.tsx"
 import { Refine } from "@refinedev/core";
 import dataProvider from "@refinedev/simple-rest";
-import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
+import routerProvider, { NavigateToResource } from "@refinedev/react-router";
 
 import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";
 
@@ -462,7 +462,7 @@ For this, we need to create a `<Route>` with the same path. To do this, we shoul
 
 ```tsx title="src/App.tsx"
 // highlight-start
-import { NavigateToResource, Route, Routes } from "@refinedev/react-router-v6";
+import { NavigateToResource, Route, Routes } from "@refinedev/react-router";
 import { PostList } from "./pages/posts/list";
 // highlight-end
 

documentation/blog/2023-03-07-react-dnd.md

@@ -180,7 +180,7 @@ import "@refinedev/antd/dist/reset.css";
 import routerBindings, {
   DocumentTitleHandler,
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import dataProvider from "@refinedev/simple-rest";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 import { Header } from "./components/header";

documentation/blog/2023-03-15-refine-vs-blitzjs.md

@@ -108,7 +108,7 @@ import "@refinedev/antd/dist/reset.css";
 import { useAuth0 } from "@auth0/auth0-react";
 import routerBindings, {
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import dataProvider from "@refinedev/simple-rest";
 import axios from "axios";
 import { BrowserRouter } from "react-router-dom";

documentation/blog/2023-04-06-finefood-admin-dashboard.md

@@ -91,7 +91,7 @@ import "@refinedev/antd/dist/reset.css";
 
 import routerBindings, {
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import dataProvider from "@refinedev/simple-rest";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { ColorModeContextProvider } from "./contexts/color-mode";
@@ -354,7 +354,7 @@ import { WelcomePage, useNotificationProvider } from "@refinedev/antd";
 import "@refinedev/antd/dist/reset.css";
 import routerBindings, {
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import jsonServerDataProvider from "@refinedev/simple-rest";
 import { BrowserRouter, Route, Routes, Outlet } from "react-router-dom";
 import { ColorModeContextProvider } from "./contexts/color-mode";
@@ -1987,7 +1987,7 @@ import routerBindings, {
   CatchAllNavigate,
   NavigateToResource,
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 import { ColorModeContextProvider } from "./contexts/color-mode";
 import { DashboardOutlined } from "@ant-design/icons";

documentation/blog/2023-04-10-refine-invoicer-1.md

@@ -56,7 +56,7 @@ A **Refine** app is centered mainly around the `<Refine />` component, which is
 ```tsx title="App.tsx"
 import { Refine } from "@refinedev/core";
 import { DataProvider } from "@refinedev/strapi-v4";
-import routerBindings from "@refinedev/react-router-v6";
+import routerBindings from "@refinedev/react-router";
 
 <Refine
   dataProvider={DataProvider(API_URL + `/api`, axiosInstance)}

documentation/blog/2023-04-11-refine-invoicer-2.md

@@ -152,7 +152,7 @@ import routerBindings, {
   CatchAllNavigate,
   NavigateToResource,
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { DataProvider } from "@refinedev/strapi-v4";
 import {
   BlogPostCreate,

documentation/blog/2023-04-12-refine-invoicer-3.md

@@ -66,7 +66,7 @@ import routerBindings, {
   CatchAllNavigate,
   NavigateToResource,
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { DataProvider } from "@refinedev/strapi-v4";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 import { authProvider, axiosInstance } from "./authProvider";
@@ -361,7 +361,7 @@ import routerBindings, {
   CatchAllNavigate,
   NavigateToResource,
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { DataProvider } from "@refinedev/strapi-v4";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 import { authProvider, axiosInstance } from "./authProvider";

documentation/blog/2023-04-13-refine-invoicer-4.md

@@ -123,7 +123,7 @@ import routerBindings, {
   CatchAllNavigate,
   NavigateToResource,
   UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+} from "@refinedev/react-router";
 import { DataProvider } from "@refinedev/strapi-v4";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 import { authProvider, axiosInstance } from "./authProvider";