feat: upgrade to react router v7

.github/workflows/build-remote.js

@@ -61,7 +61,7 @@ const buildRemote = async () => {
     };
 
     if (["react", "vite"].includes(FRAMEWORK)) {
-        body.answers["router-provider"] = "react-router-v6";
+        body.answers["router-provider"] = "react-router";
     }
 
     const createdBoilerplate = await axios.post(

.github/workflows/build-template.js

@@ -69,7 +69,7 @@ const buildTemplate = async () => {
     };
 
     if (["react", "vite"].includes(FRAMEWORK)) {
-        body.answers["router-provider"] = "react-router-v6";
+        body.answers["router-provider"] = "react-router";
     }
 
     const randomDir = randomString(25);

presets.js

@@ -5,7 +5,7 @@ module.exports = {
             type: "refine-vite",
             answers: {
                 "ui-framework": "antd",
-                "router-provider": "react-router-v6",
+                "router-provider": "react-router",
                 "data-provider": "data-provider-custom-json-rest",
                 "auth-provider": "none",
                 "antd-example": "antd-example",
@@ -18,7 +18,7 @@ module.exports = {
             type: "refine-vite",
             answers: {
                 "ui-framework": "no",
-                "router-provider": "react-router-v6",
+                "router-provider": "react-router",
                 "data-provider": "data-provider-custom-json-rest",
                 "auth-provider": "none",
                 "antd-example": "no",
@@ -31,7 +31,7 @@ module.exports = {
             type: "refine-vite",
             answers: {
                 "ui-framework": "mui",
-                "router-provider": "react-router-v6",
+                "router-provider": "react-router",
                 "data-provider": "data-provider-custom-json-rest",
                 "auth-provider": "none",
                 "antd-example": "no",
@@ -56,7 +56,7 @@ module.exports = {
             type: "refine-vite",
             answers: {
                 "ui-framework": "antd",
-                "router-provider": "react-router-v6",
+                "router-provider": "react-router",
                 "data-provider": "data-provider-supabase",
                 "antd-example": "no",
                 "mui-example": "no",
@@ -68,7 +68,7 @@ module.exports = {
             type: "refine-vite",
             answers: {
                 "ui-framework": "no",
-                "router-provider": "react-router-v6",
+                "router-provider": "react-router",
                 "data-provider": "data-provider-supabase",
                 "antd-example": "no",
                 "mui-example": "no",
@@ -80,7 +80,7 @@ module.exports = {
             type: "refine-vite",
             answers: {
                 "ui-framework": "antd",
-                "router-provider": "react-router-v6",
+                "router-provider": "react-router",
                 "data-provider": "data-provider-appwrite",
                 "antd-example": "no",
                 "mui-example": "no",
@@ -92,7 +92,7 @@ module.exports = {
             type: "refine-vite",
             answers: {
                 "ui-framework": "tailwindcss",
-                "router-provider": "react-router-v6",
+                "router-provider": "react-router",
                 "data-provider": "data-provider-custom-json-rest",
                 "auth-provider": "none",
                 "antd-example": "no",

refine-vite/plugins/_base/src/components/breadcrumb/index.tsx

@@ -1,5 +1,5 @@
 import { useBreadcrumb } from "@refinedev/core";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 export const Breadcrumb = () => {
     const { breadcrumbs } = useBreadcrumb();

refine-vite/plugins/_base/src/components/menu/index.tsx

@@ -4,7 +4,7 @@ import {
     <%_ } _%>
      useMenu 
 } from "@refinedev/core";
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 
 export const Menu = () => {
     <%_ if (_app.isAuthRoutes) { _%>

refine-vite/plugins/headless-example/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@refinedev/react-hook-form": "^4.8.14",
-    "@refinedev/react-router-v6": "^4.5.5",
+    "@refinedev/react-router": "^1.0.0",
     "@refinedev/react-table": "^5.6.6",
     "@tanstack/react-table": "^8.2.6"
   }

refine-vite/plugins/react-router-v6/extend.js → refine-vite/plugins/react-router/extend.js

@@ -1,8 +1,8 @@
 const base = {
     _app: {
         import: [
-            `import { BrowserRouter, Route, Routes, Outlet } from "react-router-dom";`,
-            `import routerBindings, { NavigateToResource, CatchAllNavigate, UnsavedChangesNotifier, DocumentTitleHandler } from "@refinedev/react-router-v6";`
+            `import { BrowserRouter, Route, Routes, Outlet } from "react-router";`,
+            `import routerBindings, { NavigateToResource, CatchAllNavigate, UnsavedChangesNotifier, DocumentTitleHandler } from "@refinedev/react-router";`
         ],
         refineProps: [],
     },

refine-vite/plugins/react-router/package.json

@@ -0,0 +1,5 @@
+{
+    "dependencies": {
+        "@refinedev/react-router": "^1.0.0"
+    }
+}

refine-vite/prompt.js

@@ -153,12 +153,12 @@ module.exports = {
             type: "select",
             choices: [
                 {
-                    message: "React Router v6",
-                    name: "react-router-v6",
-                    hint: "React Router v6 will be used as router.",
+                    message: "React Router",
+                    name: "react-router",
+                    hint: "React Router will be used as router.",
                 },
             ],
-            default: "react-router-v6",
+            default: "react-router",
             skip: () => true,
         },
         {

refine-vite/template/_package.json

@@ -10,7 +10,7 @@
     "@refinedev/kbar": "^1.3.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-router-dom": "^6.8.1"
+    "react-router": "^7.0.2"
   },
   "devDependencies": {
     "@types/node": "^18.16.2",