Add support for React router v8

Makefile

@@ -48,6 +48,10 @@ build-offline: ## build the offline example
 preview-offline: ## preview the offline example
 	@yarn preview-offline
 
+build-ra-router-react-router:
+	@echo "Transpiling ra-router-react-router files...";
+	@cd ./packages/ra-router-react-router && yarn build
+
 build-ra-core:
 	@echo "Transpiling ra-core files...";
 	@cd ./packages/ra-core && yarn build
@@ -56,6 +60,10 @@ build-ra-router-tanstack:
 	@echo "Transpiling ra-router-tanstack files...";
 	@cd ./packages/ra-router-tanstack && yarn build
 
+build-ra-router-react-router-next:
+	@echo "Transpiling ra-router-react-router-next files...";
+	@cd ./packages/ra-router-react-router-next && yarn build
+
 build-ra-ui-materialui:
 	@echo "Transpiling ra-ui-materialui files...";
 	@cd ./packages/ra-ui-materialui && yarn build
@@ -129,7 +137,7 @@ update-package-exports: ## Update the package.json "exports" field for all packa
 	@echo "Updating package exports..."
 	@yarn tsx ./scripts/update-package-exports.ts
 
-build: build-ra-core build-ra-router-tanstack build-ra-data-fakerest build-ra-ui-materialui build-ra-data-json-server build-ra-data-local-forage build-ra-data-local-storage build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphql-simple build-ra-input-rich-text build-data-generator build-ra-language-english build-ra-language-french build-ra-i18n-i18next build-ra-i18n-polyglot build-react-admin build-ra-no-code build-create-react-admin update-package-exports  ## compile ES6 files to JS
+build: build-ra-router-react-router build-ra-core build-ra-router-tanstack build-ra-router-react-router-next build-ra-data-fakerest build-ra-ui-materialui build-ra-data-json-server build-ra-data-local-forage build-ra-data-local-storage build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphql-simple build-ra-input-rich-text build-data-generator build-ra-language-english build-ra-language-french build-ra-i18n-i18next build-ra-i18n-polyglot build-react-admin build-ra-no-code build-create-react-admin update-package-exports  ## compile ES6 files to JS
 
 typecheck: ## check TypeScript types
 	@yarn typecheck

cypress/e2e/auth.cy.js

@@ -8,7 +8,7 @@ describe('Authentication', () => {
     it('should go to login page after logout', () => {
         ListPage.navigate();
         ListPage.logout();
-        cy.url().then(url => expect(url).to.contain('/#/login'));
+        cy.url().should('contain', '/#/login');
     });
 
     it('should redirect to login page when not logged in', () => {
@@ -28,7 +28,7 @@ describe('Authentication', () => {
         ListPage.logout();
         LoginPage.login('login', 'password');
         ListPage.navigate();
-        cy.url().then(url => expect(url).to.contain('/#/posts'));
+        cy.url().should('contain', '/#/posts');
     });
 
     it('should redirect to initial url keeping query string', () => {
@@ -42,7 +42,7 @@ describe('Authentication', () => {
         ListPage.setAsNonLogged();
         cy.reload();
         LoginPage.login('login', 'password');
-        cy.url().then(urlAfterLogin => {
+        cy.url().should(urlAfterLogin => {
             expect(urlAfterLogin).to.contain(urlBeforeLogout);
         });
         ListPage.commentableFilter().should('exist');

docs/Admin.md

@@ -40,7 +40,7 @@ In most apps, you need to pass more props to `<Admin>`. Here is a more complete
 ```tsx
 // in src/App.js
 import { Admin, Resource, CustomRoutes } from 'react-admin';
-import { Route } from "react-router-dom";
+import { Route } from "react-router";
 
 import { dataProvider, authProvider, i18nProvider } from './providers';
 import { Layout } from './layout';
@@ -86,7 +86,7 @@ To make the main app component more concise, a good practice is to move the reso
 ```tsx
 // in src/App.js
 import { Admin, Resource, CustomRoutes } from 'react-admin';
-import { Route } from "react-router-dom";
+import { Route } from "react-router";
 
 import { dataProvider, authProvider, i18nProvider } from './providers';
 import { Layout } from './layout';
@@ -396,7 +396,8 @@ The Auth Provider also lets you configure redirections after login/logout, anony
 Use this prop to make all routes and links in your Admin relative to a "base" portion of the URL pathname that they all share. This is required when using the [`BrowserRouter`](https://reactrouter.com/en/main/router-components/browser-router) to serve the application under a sub-path of your domain (for example https://marmelab.com/ra-enterprise-demo), or when embedding react-admin inside a single-page app with its own routing.
 
 ```tsx
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router';
+import { BrowserRouter } from 'react-router-dom';
 import { StoreFront } from './StoreFront';
 import { StoreAdmin } from './StoreAdmin';
 
@@ -1158,7 +1159,7 @@ In addition to [`<Resource> elements`](./Resource.md) for CRUD pages, you can us
 ```tsx
 // in src/App.js
 import * as React from "react";
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 import { Admin, Resource, CustomRoutes } from 'react-admin';
 import posts from './posts';
 import comments from './comments';
@@ -1190,7 +1191,8 @@ By default, react-admin uses react-router with a [HashRouter](https://reactroute
 But you may want to use another routing strategy, e.g. to allow server-side rendering of individual pages. React-router offers various Router components to implement such routing strategies. If you want to use a different router, simply put your app in a create router function. React-admin will detect that it's already inside a router, and skip its own router. 
 
 ```tsx
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { RouterProvider } from 'react-router';
+import { createBrowserRouter } from 'react-router-dom';
 import { Admin, Resource } from 'react-admin';
 import { dataProvider } from './dataProvider';
 
@@ -1217,7 +1219,8 @@ However, if you serve your admin from a sub path AND use another Router (like [`
 
 ```tsx
 import { Admin, Resource } from 'react-admin';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { RouterProvider } from 'react-router';
+import { createBrowserRouter } from 'react-router-dom';
 import { dataProvider } from './dataProvider';
 
 const App = () => {
@@ -1249,7 +1252,8 @@ If you want to use react-admin as a sub path of a larger React application, chec
 You can include a react-admin app inside another app, using a react-router `<Route>`:
 
 ```tsx
-import { RouterProvider, Routes, Route, createBrowserRouter } from 'react-router-dom';
+import { RouterProvider, Routes, Route } from 'react-router';
+import { createBrowserRouter } from 'react-router-dom';
 import { StoreFront } from './StoreFront';
 import { StoreAdmin } from './StoreAdmin';
 

docs/Architecture.md

@@ -21,7 +21,7 @@ For example, the following react-admin application:
 
 ```jsx
 import { Admin, Resource, CustomRoutes } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 export const App = () => (
     <Admin dataProvider={dataProvider}>

docs/Authenticated.md

@@ -13,7 +13,7 @@ Use it as an alternative to the [`useAuthenticated()`](./useAuthenticated.md) ho
 
 ```jsx
 import { Admin, CustomRoutes, Authenticated } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 const App = () => (
     <Admin authProvider={authProvider}>

docs/Authentication.md

@@ -95,7 +95,7 @@ When you add custom pages, they are accessible to anonymous users by default. To
 
 ```jsx
 import { Admin, CustomRoutes, useAuthenticated } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 const RestrictedPage = () => {
     const { isPending } = useAuthenticated(); // redirects to login if not authenticated
@@ -127,7 +127,7 @@ Alternatively, use the [`<Authenticated>` component](./Authenticated.md) to disp
 
 ```jsx
 import { Admin, CustomRoutes, Authenticated } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 const RestrictedPage = () => (
     <Authenticated>

docs/Breadcrumb.md

@@ -744,7 +744,7 @@ Let's say that this custom page is added to the app under the `/settings` URL:
 ```jsx
 // in src/App.jsx
 import { Admin, Resource, CustomRoutes, } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 import { MyLayout } from './MyLayout';
 import { UserPreferences } from './UserPreferences';
@@ -854,7 +854,7 @@ For instance, the screencast at the top of this page shows a `songs` resource ne
 
 ```jsx
 import { Admin, Resource } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 export const App = () => (
     <Admin dataProvider={dataProvider}>

docs/CanAccess.md

@@ -63,7 +63,7 @@ Use the [`<CustomRoutes>`](./CustomRoutes.md) component to add custom routes to
 
 ```tsx
 import { Admin, CustomRoutes, Authenticated, CanAccess, AccessDenied, Layout } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 import { LogsPage } from './LogsPage';
 import { MyMenu } from './MyMenu';

docs/ContainerLayout.md

@@ -97,7 +97,7 @@ import {
     ListGuesser,
     EditGuesser,
 } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 import {
     ContainerLayout,
     HorizontalMenu,

docs/CustomRoutes.md

@@ -43,7 +43,7 @@ The `Route` element depends on the routing library you use (e.g. `react-router`
 
 ```jsx
 // for react-router
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 // for tanstack-router
 import { tanStackRouterProvider } from 'ra-router-tanstack';
 const { Route } = tanStackRouterProvider;
@@ -62,7 +62,7 @@ Now, when a user browses to `/settings` or `/profile`, the components you define
 ```jsx
 // in src/App.js
 import { Admin, Resource, CustomRoutes } from 'react-admin';
-import { Route } from "react-router-dom";
+import { Route } from "react-router";
 
 import { dataProvider } from './dataProvider';
 import { Settings } from './Settings';
@@ -95,7 +95,7 @@ Here is an example of application configuration mixing custom routes with and wi
 ```jsx
 // in src/App.js
 import { Admin, CustomRoutes } from 'react-admin';
-import { Route } from "react-router-dom";
+import { Route } from "react-router";
 
 import { dataProvider } from './dataProvider';
 import { Register } from './Register';
@@ -124,7 +124,7 @@ By default, custom routes can be accessed even by anomymous users. If you want t
 ```jsx
 // in src/App.js
 import { Admin, CustomRoutes, Authenticated } from 'react-admin';
-import { Route } from "react-router-dom";
+import { Route } from "react-router";
 
 import { dataProvider } from './dataProvider';
 import { Settings } from './Settings';
@@ -207,7 +207,7 @@ Finally, pass the custom `<Layout>` component to `<Admin>`:
 ```jsx
 // in src/App.js
 import { Admin, Resource, CustomRoutes } from 'react-admin';
-import { Route } from "react-router-dom";
+import { Route } from "react-router";
 
 import { dataProvider } from './dataProvider';
 import { MyLayout } from './MyLayout';
@@ -276,7 +276,7 @@ To do so, add the `<Route>` elements as [children of the `<Resource>` element](.
 
 ```jsx
 import { Admin, Resource } from 'react-admin';
-import { Route } from "react-router-dom";
+import { Route } from "react-router";
 
 import { dataProvider } from './dataProvider';
 import posts from './posts';
@@ -307,7 +307,7 @@ This is usually useful for nested resources, such as books on authors:
 ```jsx
 // in src/App.jsx
 import { Admin, Resource, ListGuesser, EditGuesser } from 'react-admin';
-import { Route } from "react-router-dom";
+import { Route } from "react-router";
 
 const App = () => (
     <Admin dataProvider={dataProvider}>

docs/DeletedRecordsList.md

@@ -19,7 +19,7 @@ However, you need to define the route to reach this component manually using [`<
 ```tsx
 // in src/App.js
 import { Admin, CustomRoutes } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 import { DeletedRecordsList } from '@react-admin/ra-soft-delete';
 
 export const App = () => (
@@ -116,7 +116,7 @@ However, you **must** use [`<ShowDeleted>`](./ShowDeleted.md) component instead
 {% raw %}
 ```tsx
 import { Admin, CustomRoutes, SimpleShowLayout, TextField } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 import { DeletedRecordsList, ShowDeleted } from '@react-admin/ra-soft-delete';
 
 const ShowDeletedBook = () => (
@@ -394,7 +394,7 @@ In the example below, the deleted records lists store their list parameters sepa
 {% raw %}
 ```tsx
 import { Admin, CustomRoutes } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 import { DeletedRecordsList } from '@react-admin/ra-soft-delete';
 
 const Admin = () => {

docs/List.md

@@ -1048,7 +1048,7 @@ import {
     List,
     DataTable,
 } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 const NewerBooks = () => (
     <List

docs/Permissions.md

@@ -277,7 +277,7 @@ Use the [`<CustomRoutes>`](./CustomRoutes.md) component to add custom routes to
 
 ```tsx
 import { Admin, CustomRoutes, Authenticated, CanAccess, AccessDenied, Layout } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 import { LogsPage } from './LogsPage';
 import { MyMenu } from './MyMenu';

docs/ReactRouterV8.md

@@ -0,0 +1,59 @@
+---
+layout: default
+title: "React Router v8 Integration"
+---
+
+# React Router v8 Integration
+
+By default, react-admin is powered by [React Router](https://reactrouter.com/) v6/v7 through the `ra-router-react-router` adapter, which is installed automatically. React Router v8 merged the former `react-router-dom` package into `react-router` and requires **React 19**, so support for it ships as a separate, opt-in adapter package: `ra-router-react-router-next`.
+
+**New projects are encouraged to run on React Router v8 using `ra-router-react-router-next`.** The React Router v6/v7 adapter remains the default for backward compatibility, and **`ra-router-react-router-next` will become the default `ra-router-react-router` in react-admin v6.**
+
+Use this package when your application runs on React Router v8.
+
+## Installation
+
+```bash
+npm install ra-router-react-router-next react-router@^8
+# or
+yarn add ra-router-react-router-next react-router@^8
+```
+
+React Router v8 requires React 19. Make sure your application uses `react@^19.2.7` and `react-dom@^19.2.7`.
+
+## Configuration
+
+Set the `<Admin routerProvider>` to `reactRouterNextProvider`:
+
+```tsx
+import { Admin, Resource, ListGuesser } from 'react-admin';
+import { reactRouterNextProvider } from 'ra-router-react-router-next';
+import { dataProvider } from './dataProvider';
+
+const App = () => (
+    <Admin
+        dataProvider={dataProvider}
+        routerProvider={reactRouterNextProvider}
+    >
+        <Resource name="posts" list={ListGuesser} />
+        <Resource name="comments" list={ListGuesser} />
+    </Admin>
+);
+
+export default App;
+```
+
+That's it! React-admin will now use React Router v8 for all routing operations.
+
+## Standalone Mode
+
+When using `reactRouterNextProvider` without an existing React Router, react-admin creates its own hash router automatically (URLs like `/#/posts`). This is called **standalone mode**. This is the simplest setup and requires no additional configuration.
+
+## Embedded Mode
+
+If your application already uses React Router, you can embed react-admin inside it. React-admin detects the existing router context and uses it instead of creating its own.
+
+## When To Use This Package
+
+- Use the **default** `ra-router-react-router` adapter (installed automatically, no extra setup) if your app runs on React Router v6 or v7.
+- Use **`ra-router-react-router-next`** if your app runs on React Router v8 (and therefore React 19). This is the recommended choice for new projects, and it will become the default in react-admin v6.

docs/Resource.md

@@ -116,7 +116,7 @@ For instance, the following code creates an `authors` resource, and adds an `/au
 ```jsx
 // in src/App.jsx
 import { Admin, Resource } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 import { AuthorList } from './AuthorList';
 import { BookList } from './BookList';
@@ -329,7 +329,7 @@ React-admin doesn't support nested resources, but you can use [the `children` pr
 
 ```jsx
 import { Admin, Resource } from 'react-admin';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 export const App = () => (
     <Admin dataProvider={dataProvider}>