Replace all existing imports of react-router-dom (#4152)

* Replace all existing imports

* Restore double quotes

* Add upgrade note for React Router imports

articles/flow/integrations/hilla.adoc

@@ -100,7 +100,7 @@ Use Vaadin's <<{articles}/components/side-nav#,Side Navigation>> or React's <<{a
 
 [source,javascript]
 ----
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 <NavLink to="/flow-route">Navigate to a Flow View</NavLink>
 ----

articles/getting-started/tutorial/hilla/first-view.adoc

@@ -63,7 +63,7 @@ In your IDE, create the file and copy-paste the following contents into it:
 [email protected]
 [source,tsx]
 ----
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 export default function ChannelView() {
     const { channelId } = useParams()
@@ -88,7 +88,7 @@ In your IDE, replace the contents of [filename]`@index.tsx` with the following:
 [email protected]
 [source,tsx]
 ----
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { MessageInput } from '@vaadin/react-components/MessageInput';
 import { MessageList } from '@vaadin/react-components/MessageList';
 import { VerticalLayout } from '@vaadin/react-components/VerticalLayout';
@@ -265,7 +265,7 @@ You are going to call this method and store the result inside a *signal*. For no
 [email protected]
 [source,tsx]
 ----
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { useSignal } from '@vaadin/hilla-react-signals';
 import { MessageInput } from '@vaadin/react-components/MessageInput';
 import { MessageList } from '@vaadin/react-components/MessageList';
@@ -307,7 +307,7 @@ Next, you want to call this function whenever the [variablename]`channelId` para
 [source,tsx]
 ----
 import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { useSignal } from '@vaadin/hilla-react-signals';
 import { MessageInput } from '@vaadin/react-components/MessageInput';
 import { MessageList } from '@vaadin/react-components/MessageList';

articles/getting-started/tutorial/hilla/layout.adoc

@@ -43,7 +43,7 @@ To create a layout for the views, start with a file named [filename]`@layout.tsx
 ----
 import { AppLayout, DrawerToggle, Tooltip } from '@vaadin/react-components';
 import { Suspense } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 export default function MainLayout() {
     return (
@@ -85,7 +85,7 @@ Start by updating the imports at the top of the [filename]`@layout.tsx` file as
 import { createMenuItems } from '@vaadin/hilla-file-router/runtime.js';
 import { AppLayout, DrawerToggle, Icon, SideNav, SideNavItem, Tooltip } from '@vaadin/react-components';
 import { Suspense } from 'react';
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router';
 ...
 ----
 

articles/getting-started/tutorial/hilla/second-view.adoc

@@ -164,7 +164,7 @@ You are now going to add a simple renderer to the virtual list. It will render a
 [source,tsx]
 ----
 ...
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 export default function LobbyView() {
     ...

articles/hilla/guides/from-java-to-react.adoc

@@ -311,12 +311,12 @@ Below are some useful routing hooks with explanations and examples of how to use
 
 File Router supports parameters in URLs. You can define a parameter in the file name by creating a file or folder with the name enclosed in curly braces. For example, a file named [filename]`views/user/{userId}.tsx` or [filename]`views/user/{userId}/@index.tsx` matches the URL `/user/123`, and the `userId` parameter is available in the component props.
 
-The parameter is accessible using the `useParams` hook from the `react-router-dom` package.
+The parameter is accessible using the `useParams` hook from the `react-router` package.
 
 .TSX
 [source,jsx]
 ----
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 export default function UserView() {
     const { userId } = useParams<{ userId: string }>();
@@ -365,7 +365,7 @@ The `useLocation` hook returns the current location object. You can use it to re
 .TSX
 [source,jsx]
 ----
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 export default function LocationView() {
     const location = useLocation();

articles/hilla/guides/routing.adoc

@@ -30,11 +30,11 @@ export default function ExampleView() {
 
 Now, after saving the file, you should be able to navigate to `http://localhost:8080/example` and see the new component rendered in the browser.
 
-To add a simple navigation link that points to your new route, use the `<NavLink>` component from `react-router-dom`:
+To add a simple navigation link that points to your new route, use the `<NavLink>` component from `react-router`:
 
 [source,tsx]
 ----
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 <NavLink to="/my-view">My View</NavLink>
 ----
@@ -70,7 +70,7 @@ For example, create a file named `{productId}.tsx` in the `src/main/frontend/vie
 .`{productId}.tsx`
 [source,tsx]
 ----
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 export default function ProductView() {
   const { productId } = useParams();
@@ -86,7 +86,7 @@ export default function ProductView() {
 }
 ----
 
-This creates the route with the path `/products/{productId}`, where `{productId}` acts as a placeholder for the actual product ID. To access the route parameter in the view, use the `useParams` hook from `react-router-dom` in your component, as shown in the example above. The view component fetches product data for the product ID in the route.
+This creates the route with the path `/products/{productId}`, where `{productId}` acts as a placeholder for the actual product ID. To access the route parameter in the view, use the `useParams` hook from `react-router` in your component, as shown in the example above. The view component fetches product data for the product ID in the route.
 
 To link to this route with a specific `productId`, you can use the `to` property of `NavLink` like this:
 
@@ -130,7 +130,7 @@ import { ProgressBar } from '@vaadin/react-components/ProgressBar.js';
 import { SideNav } from '@vaadin/react-components/SideNav.js';
 import { SideNavItem } from '@vaadin/react-components/SideNavItem.js';
 import { Suspense } from 'react';
-import { Outlet, useNavigate, useLocation } from 'react-router-dom';
+import { Outlet, useNavigate, useLocation } from 'react-router';
 
 export default function MainLayout() {
   return (
@@ -168,7 +168,7 @@ The following example demonstrates creating the main menu `createMenuItems()`:
 import { createMenuItems } from '@vaadin/hilla-file-router/runtime.js';
 import { SideNav } from '@vaadin/react-components/SideNav.js';
 import { SideNavItem } from '@vaadin/react-components/SideNavItem.js';
-import { Outlet, useNavigate, useLocation } from 'react-router-dom';
+import { Outlet, useNavigate, useLocation } from 'react-router';
 
 export default function MainMenu() {
   const navigate = useNavigate();
@@ -240,7 +240,7 @@ Under the hood, the route metadata is passed through using the `.handle` React R
 
 [source,ts]
 ----
-import { useMatches } from 'react-router-dom';
+import { useMatches } from 'react-router';
 
 export default function MainLayout() {
   const matches = useMatches();
@@ -291,13 +291,13 @@ For applications using authentication, requires user authentication for accessin
 
 == Programmatic Navigation
 
-Sometimes, you may need to navigate programmatically between routes. For example, this may be needed in response to user interactions or application logic. For this you can use the `useNavigate` hook from `react-router-dom`. It provides a function that allows you to navigate to a specific route when called. Additionally, it offers options to control the navigation behavior, such as pushing to the history stack or replacing the current entry.
+Sometimes, you may need to navigate programmatically between routes. For example, this may be needed in response to user interactions or application logic. For this you can use the `useNavigate` hook from `react-router`. It provides a function that allows you to navigate to a specific route when called. Additionally, it offers options to control the navigation behavior, such as pushing to the history stack or replacing the current entry.
 
 For example, after saving a product, you might want to navigate back to the product list:
 
 [source,tsx]
 ----
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 function ProductDetailView() {
   const navigate = useNavigate();

articles/hilla/lit/guides/security/spring-login.adoc

@@ -403,7 +403,7 @@ Use `createMenuItems` function to create a main layout, that filters out protect
 ----
 import { createMenuItems } from '@vaadin/hilla-file-router/runtime.js';
 import { AppLayout, SideNav } from '@vaadin/react-components';
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router';
 
 // inside layout component:
 const navigate = useNavigate();

articles/hilla/lit/guides/upgrading/index.adoc

@@ -22,6 +22,11 @@ Starting from 24.7, Hilla no longer needs to launch a Maven or Gradle process ea
 
 If you need to use endpoints coming from other packages, make sure that they're instantiated as Spring Beans: Hilla now searches for annotated classes between the Spring Beans that are available in the application.
 
+ifdef::hilla-react[]
+=== React Router Imports
+
+Replace all imports from `react-router-dom` with `react-router` in your React projects. This change is necessary starting from React Router v7, which is used in Hilla 24.7.
+endif::[]
 
 == Upgrading from 2.x to 24.4.0
 

articles/upgrading/index.adoc

@@ -305,7 +305,7 @@ Vaadin 24.4 and later versions unify the server and client development approache
 
 === Hilla & React Dependencies
 
-Vaadin 24 includes React dependencies, such as https://www.npmjs.com/package/react[React], https://www.npmjs.com/package/react-router-dom[React Router], and https://github.com/vaadin/react-components[Vaadin React-based components] provided by Vaadin. These dependencies allow you to start developing immediately with React.
+Vaadin 24 includes React dependencies, such as https://www.npmjs.com/package/react[React], https://www.npmjs.com/package/react-router[React Router], and https://github.com/vaadin/react-components[Vaadin React-based components] provided by Vaadin. These dependencies allow you to start developing immediately with React.
 
 Vaadin React includes free, core components and commercial (i.e., professional) components. These components are shipped in the separate npm packages: `@vaadin/react-components`, which is only free; and `@vaadin/react-components-pro`, which is only commercial. Vaadin adds both of these packages to [filename]`package.json` if the `com.vaadin:vaadin` artifact is in the project's configuration: