diff --git a/articles/flow/integrations/hilla.adoc b/articles/flow/integrations/hilla.adoc
index 7922324b6e..ac94f15240 100644
--- a/articles/flow/integrations/hilla.adoc
+++ b/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';
Navigate to a Flow View
----
diff --git a/articles/getting-started/tutorial/hilla/first-view.adoc b/articles/getting-started/tutorial/hilla/first-view.adoc
index 016c9d7dbb..485e944cc7 100644
--- a/articles/getting-started/tutorial/hilla/first-view.adoc
+++ b/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:
.@index.tsx
[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:
.@index.tsx
[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
.@index.tsx
[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';
diff --git a/articles/getting-started/tutorial/hilla/layout.adoc b/articles/getting-started/tutorial/hilla/layout.adoc
index baae39765b..c566ee4d9c 100644
--- a/articles/getting-started/tutorial/hilla/layout.adoc
+++ b/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';
...
----
diff --git a/articles/getting-started/tutorial/hilla/second-view.adoc b/articles/getting-started/tutorial/hilla/second-view.adoc
index 17fbe2edf1..e7f5d550d0 100644
--- a/articles/getting-started/tutorial/hilla/second-view.adoc
+++ b/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() {
...
diff --git a/articles/hilla/guides/from-java-to-react.adoc b/articles/hilla/guides/from-java-to-react.adoc
index 74d173e29e..daef1d7404 100644
--- a/articles/hilla/guides/from-java-to-react.adoc
+++ b/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();
diff --git a/articles/hilla/guides/routing.adoc b/articles/hilla/guides/routing.adoc
index d844c0960a..7a7c4bef6f 100644
--- a/articles/hilla/guides/routing.adoc
+++ b/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 `` component from `react-router-dom`:
+To add a simple navigation link that points to your new route, use the `` component from `react-router`:
[source,tsx]
----
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
My View
----
@@ -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();
diff --git a/articles/hilla/lit/guides/security/spring-login.adoc b/articles/hilla/lit/guides/security/spring-login.adoc
index a658b972a5..be7b54f9c1 100644
--- a/articles/hilla/lit/guides/security/spring-login.adoc
+++ b/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();
diff --git a/articles/hilla/lit/guides/upgrading/index.adoc b/articles/hilla/lit/guides/upgrading/index.adoc
index 6921c78a6b..cec5bb8d33 100644
--- a/articles/hilla/lit/guides/upgrading/index.adoc
+++ b/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
diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc
index 5c1c499ed6..d2787096c3 100644
--- a/articles/upgrading/index.adoc
+++ b/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: