chore: React Router v7

flow-react/src/main/resources/META-INF/resources/frontend/ReactRouterOutletElement.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import { ReactAdapterElement } from "Frontend/generated/flow/ReactAdapter.js";
 import React from "react";
 

flow-server/src/main/java/com/vaadin/flow/server/frontend/TaskGenerateReactFiles.java

@@ -78,7 +78,7 @@ public class TaskGenerateReactFiles
 
                 OR
 
-                import { createBrowserRouter, RouteObject } from 'react-router-dom';
+                import { createBrowserRouter, RouteObject } from 'react-router';
                 import { serverSideRoutes } from 'Frontend/generated/flow/Flow';
 
                 function build() {

flow-server/src/main/resources/com/vaadin/flow/server/frontend/Flow.tsx

@@ -29,8 +29,7 @@ import {
     useLocation,
     useNavigate,
     type NavigateOptions, useHref,
-} from "react-router-dom";
-import type { AgnosticRouteObject } from '@remix-run/router';
+} from "react-router";
 import { createPortal } from "react-dom";
 
 const flow = new _Flow({
@@ -385,7 +384,7 @@ function Flow() {
             }
             fromAnchor.current = false;
             const {pathname, search} = blocker.location;
-            const routes = ((window as any)?.Vaadin?.routesConfig || []) as AgnosticRouteObject[];
+            const routes = ((window as any)?.Vaadin?.routesConfig || []) as any[];
             let matched = matchRoutes(Array.from(routes), pathname);
 
             // Navigation between server routes

flow-server/src/main/resources/com/vaadin/flow/server/frontend/dependencies/react-router/package.json

@@ -4,7 +4,7 @@
   "dependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router-dom": "6.28.0"
+    "react-router": "7.0.0"
   },
   "devDependencies": {
     "@types/react": "18.3.12",

flow-server/src/main/resources/com/vaadin/flow/server/frontend/index-react.tsx

@@ -12,7 +12,7 @@
 
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider } from 'react-router';
 import { router } from '%routesJsImportPath%';
 
 function App() {

flow-server/src/main/resources/com/vaadin/flow/server/frontend/routes-flow.tsx

@@ -6,7 +6,7 @@
  * `src/main/frontend/views/` directory, this route configuration is
  * re-generated automatically by Vaadin.
  ******************************************************************************/
-import { createBrowserRouter, RouteObject } from 'react-router-dom';
+import { createBrowserRouter, RouteObject } from 'react-router';
 import { serverSideRoutes } from 'Frontend/generated/flow/Flow';
 
 function build() {

flow-server/src/test/java/com/vaadin/flow/server/frontend/BundleValidationTest.java

@@ -2135,7 +2135,7 @@ public void defaultProdBundleExists_noCompressedProdBundleFile_noBuildRequired()
         FileUtils.write(packageJson,
                 "{\"dependencies\": {" + "    \"react\": \"18.2.0\",\n"
                         + "    \"react-dom\": \"18.2.0\",\n"
-                        + "    \"react-router-dom\": \"6.18.0\"}, "
+                        + "    \"react-router\": \"7.0.0\"}, "
                         + "\"vaadin\": { \"hash\": \"aHash\"} }",
                 StandardCharsets.UTF_8);
 
@@ -2171,7 +2171,7 @@ public void defaultProdBundleExists_noCompressedProdBundleFileAndWithVersionsJso
         FileUtils.write(packageJson,
                 "{\"dependencies\": {" + "    \"react\": \"18.2.0\",\n"
                         + "    \"react-dom\": \"18.2.0\",\n"
-                        + "    \"react-router-dom\": \"6.18.0\"}, "
+                        + "    \"react-router\": \"7.0.0\"}, "
                         + "\"vaadin\": { \"hash\": \"aHash\"} }",
                 StandardCharsets.UTF_8);
 

flow-server/src/test/java/com/vaadin/flow/server/frontend/FrontendUtilsTest.java

@@ -143,7 +143,7 @@ public class FrontendUtilsTest {
                 import MainLayout from 'Frontend/views/MainLayout';
                 import ContactsView from 'Frontend/views/ContactsView';
                 import AboutView from 'Frontend/views/AboutView';
-                import { RouteObject } from 'react-router-dom';
+                import { RouteObject } from 'react-router';
 
                 export const routes: RouteObject[] = [
                       {
@@ -163,7 +163,7 @@ public class FrontendUtilsTest {
                 import MainLayout from 'Frontend/views/MainLayout';
                 import ContactsView from 'Frontend/views/ContactsView';
                 import AboutView from 'Frontend/views/AboutView';
-                import { RouteObject } from 'react-router-dom';
+                import { RouteObject } from 'react-router';
 
                 export const routes: RouteObject[] = [
                       {

flow-server/src/test/java/com/vaadin/flow/server/frontend/NodeUpdaterTest.java

@@ -120,7 +120,7 @@ public void getDefaultDependencies_includesAllDependencies() {
         expectedDependencies.add("lit");
         expectedDependencies.add("react");
         expectedDependencies.add("react-dom");
-        expectedDependencies.add("react-router-dom");
+        expectedDependencies.add("react-router");
 
         Set<String> actualDependendencies = defaultDeps.keySet();
 

flow-server/src/test/java/com/vaadin/flow/server/frontend/TaskGenerateReactFilesTest.java

@@ -188,7 +188,7 @@ public void routesContainMultipleFlowImports_noExceptionThrown()
         String content = """
                         import HelloWorldView from 'Frontend/views/helloworld/HelloWorldView.js';
                         import MainLayout from 'Frontend/views/MainLayout.js';
-                        import { createBrowserRouter, RouteObject } from 'react-router-dom';
+                        import { createBrowserRouter, RouteObject } from 'react-router';
                         import { tea, serverSideRoutes, coffee } from "Frontend/generated/flow/Flow";
                         import LoginView from "Frontend/views/LoginView";
 
@@ -223,7 +223,7 @@ public void routesMissingImportAndUsage_noBuildOrServerSideRoutes_exceptionThrow
         String content = """
                         import HelloWorldView from 'Frontend/views/helloworld/HelloWorldView.js';
                         import MainLayout from 'Frontend/views/MainLayout.js';
-                        import { createBrowserRouter, RouteObject } from 'react-router-dom';
+                        import { createBrowserRouter, RouteObject } from 'react-router';
                         import { tea, coffee } from "Frontend/generated/flow/Flow";
                         import LoginView from "Frontend/views/LoginView";
 
@@ -260,7 +260,7 @@ public void routesMissingImport_exceptionThrown() throws IOException {
                         import HelloWorldView from 'Frontend/views/helloworld/HelloWorldView.js';
                         import MainLayout from 'Frontend/views/MainLayout.js';
                         import { lazy } from 'react';
-                        import { createBrowserRouter, RouteObject } from 'react-router-dom';
+                        import { createBrowserRouter, RouteObject } from 'react-router';
                         import {protectRoutes} from "@hilla/react-auth";
                         import LoginView from "Frontend/views/LoginView";
 
@@ -298,7 +298,7 @@ public void missingImport_noServerRoutesDefined_noExceptionThrown()
                         import HelloWorldView from 'Frontend/views/helloworld/HelloWorldView.js';
                         import MainLayout from 'Frontend/views/MainLayout.js';
                         import { lazy } from 'react';
-                        import { createBrowserRouter, RouteObject } from 'react-router-dom';
+                        import { createBrowserRouter, RouteObject } from 'react-router';
                         import {protectRoutes} from "@hilla/react-auth";
                         import LoginView from "Frontend/views/LoginView";
 
@@ -583,4 +583,4 @@ private class TestRoute extends Component {
     @Layout("/test")
     private class TestLayout extends Component implements RouterLayout {
     }
-}
+}