Add support for React router v8 [RFR]

Makefile

@@ -56,6 +56,10 @@ build-ra-router-tanstack:
 	@echo "Transpiling ra-router-tanstack files...";
 	@cd ./packages/ra-router-tanstack && yarn build
 
+build-ra-router-react-router-v8:
+	@echo "Transpiling ra-router-react-router-v8 files...";
+	@cd ./packages/ra-router-react-router-v8 && yarn build
+
 build-ra-ui-materialui:
 	@echo "Transpiling ra-ui-materialui files...";
 	@cd ./packages/ra-ui-materialui && yarn build
@@ -129,7 +133,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-core build-ra-router-tanstack build-ra-router-react-router-v8 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

docs/ReactRouterV8.md

@@ -0,0 +1,57 @@
+---
+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 its built-in router adapter. 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-v8`.
+
+Use this package when your application runs on React Router v8.
+
+## Installation
+
+```bash
+npm install ra-router-react-router-v8 react-router@^8
+# or
+yarn add ra-router-react-router-v8 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 `reactRouterV8Provider`:
+
+```tsx
+import { Admin, Resource, ListGuesser } from 'react-admin';
+import { reactRouterV8Provider } from 'ra-router-react-router-v8';
+import { dataProvider } from './dataProvider';
+
+const App = () => (
+    <Admin
+        dataProvider={dataProvider}
+        routerProvider={reactRouterV8Provider}
+    >
+        <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 `reactRouterV8Provider` 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 **built-in** react-router adapter (no extra package) if your app runs on React Router v6 or v7.
+- Use **`ra-router-react-router-v8`** if your app runs on React Router v8 (and therefore React 19).

docs/Routing.md

@@ -162,7 +162,7 @@ export const MyLayout = ({ children }) => {
 
 ## Using A Different Router Library
 
-React-admin supports multiple routing libraries through its router abstraction layer. By default, it uses react-router with a [HashRouter](https://reactrouter.com/en/routers/create-hash-router). You can also use [TanStack Router](./TanStackRouter.md) as an alternative.
+React-admin supports multiple routing libraries through its router abstraction layer. By default, it uses react-router (v6/v7) with a [HashRouter](https://reactrouter.com/en/routers/create-hash-router). You can also use [TanStack Router](./TanStackRouter.md) or [React Router v8](./ReactRouterV8.md) as an alternative.
 
 To use TanStack Router:
 

packages/ra-core/package.json

@@ -66,7 +66,7 @@
         "react": "^18.0.0 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0",
         "react-hook-form": "^7.72.0",
-        "react-router": "^6.28.1 || ^7.1.1",
+        "react-router": "^6.28.1 || ^7.1.1 || ^8.0.0",
         "react-router-dom": "^6.28.1 || ^7.1.1"
     },
     "dependencies": {

packages/ra-core/src/auth/Authenticated.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import expect from 'expect';
 import { render, screen, waitFor } from '@testing-library/react';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router';
 
 import { memoryStore } from '../store';
 import { CoreAdminContext } from '../core';

packages/ra-core/src/auth/useAuthenticated.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import expect from 'expect';
 import { render, screen, waitFor } from '@testing-library/react';
-import { Routes, Route, useLocation } from 'react-router-dom';
+import { Routes, Route, useLocation } from 'react-router';
 import { memoryStore } from '../store';
 
 import { useNotificationContext } from '../notification';

packages/ra-core/src/auth/useHandleAuthCallback.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import expect from 'expect';
 import { render, screen, waitFor } from '@testing-library/react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 
 import { useHandleAuthCallback } from './useHandleAuthCallback';

packages/ra-core/src/auth/useLogin.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router';
 import expect from 'expect';
 
 import { CoreAdminContext } from '../core/CoreAdminContext';

packages/ra-core/src/auth/useLogout.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router';
 import { QueryClient } from '@tanstack/react-query';
 import expect from 'expect';
 

packages/ra-core/src/auth/useLogoutIfAccessDenied.spec.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 import expect from 'expect';
 import { render, screen, waitFor } from '@testing-library/react';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router';
 
 import useLogoutIfAccessDenied from './useLogoutIfAccessDenied';
 import { AuthContext } from './AuthContext';

packages/ra-core/src/controller/create/useCreateController.spec.tsx

@@ -7,7 +7,7 @@ import {
 } from '@testing-library/react';
 import expect from 'expect';
 import React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 
 import {
     AuthProvider,

packages/ra-core/src/controller/usePrevNextController.ts

@@ -37,11 +37,10 @@ import { useCreatePath } from '../routing';
  *
  * @example <caption>Custom PrevNextButton</caption>
  *
- * import { UsePrevNextControllerProps, useTranslate } from 'ra-core';
+ * import { UsePrevNextControllerProps, useTranslate, LinkBase as Link } from 'ra-core';
  * import NavigateBefore from '@mui/icons-material/NavigateBefore';
  * import NavigateNext from '@mui/icons-material/NavigateNext';
  * import ErrorIcon from '@mui/icons-material/Error';
- * import { Link } from 'react-router-dom';
  * import { CircularProgress, IconButton } from '@mui/material';
  *
  * const MyPrevNextButtons = props => {
@@ -78,7 +77,7 @@ import { useCreatePath } from '../routing';
  *             <li>
  *                 <IconButton
  *                     component={hasPrev ? Link : undefined}
- *                     to={navigateToPrev}
+ *                     to={prevPath}
  *                     aria-label={translate('ra.navigation.previous')}
  *                     disabled={!hasPrev}
  *                 >
@@ -93,7 +92,7 @@ import { useCreatePath } from '../routing';
  *             <li>
  *                 <IconButton
  *                     component={hasNext ? Link : undefined}
- *                     to={navigateToNext}
+ *                     to={nextPath}
  *                     aria-label={translate('ra.navigation.next')}
  *                     disabled={!hasNext}
  *                 >

packages/ra-core/src/core/CoreAdminContext.tsx

@@ -174,7 +174,7 @@ export interface CoreAdminContextProps {
      * The router provider for custom routing implementations
      *
      * Use this to integrate react-admin with alternative routers like TanStack Router.
-     * Defaults to react-router-dom.
+     * Defaults to react-router.
      *
      * @see https://marmelab.com/react-admin/Admin.html#routerprovider
      * @example

packages/ra-core/src/core/CoreAdminRoutes.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import expect from 'expect';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 
 import { CoreAdminContext } from './CoreAdminContext';
 import { RouterNavigateFunction, TestMemoryRouter } from '../routing';

packages/ra-core/src/core/useConfigureAdminRouterFromChildren.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import expect from 'expect';
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router';
 import { useResourceDefinitions } from './useResourceDefinitions';
 
 import { CoreAdminContext } from './CoreAdminContext';

packages/ra-core/src/dataProvider/useGetRecordId.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useGetRecordId } from './useGetRecordId';
 import { render, screen } from '@testing-library/react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 import { RecordContextProvider } from '../controller';
 
 import { TestMemoryRouter } from '../routing';

packages/ra-core/src/form/Form.stories.tsx

@@ -11,14 +11,8 @@ import * as yup from 'yup';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
 import fakeRestDataProvider from 'ra-data-fakerest';
-import {
-    Route,
-    Routes,
-    useNavigate,
-    Link,
-    HashRouter,
-    useLocation,
-} from 'react-router-dom';
+import { Route, Routes, useNavigate, useLocation } from 'react-router';
+import { HashRouter } from 'react-router-dom';
 
 import { CoreAdminContext } from '../core';
 import {
@@ -32,7 +26,7 @@ import { useInput } from './useInput';
 import { required, ValidationError } from './validation';
 import { mergeTranslations } from '../i18n';
 import { I18nProvider, RaRecord } from '../types';
-import { TestMemoryRouter } from '../routing';
+import { TestMemoryRouter, LinkBase as Link } from '../routing';
 import { useNotificationContext } from '../notification';
 
 export default {

packages/ra-core/src/form/useWarnWhenUnsavedChanges.spec.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import expect from 'expect';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { useForm, useFormContext, FormProvider } from 'react-hook-form';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 import { TestMemoryRouter, useNavigate, useParams } from '../routing';
 
 import { useWarnWhenUnsavedChanges } from './useWarnWhenUnsavedChanges';

packages/ra-core/src/routing/TestMemoryRouter.tsx

@@ -6,8 +6,11 @@ import {
     Location,
     useNavigate,
     NavigateFunction,
-} from 'react-router-dom';
-import type { InitialEntry } from '@remix-run/router';
+} from 'react-router';
+
+// Redefining `InitialEntry` type locally to keep `TestMemoryRouter` compatible across
+// react-router v6/v7/v8 because v8 no longer depends on `@remix-run/router`
+type InitialEntry = string | Partial<Location>;
 
 const UseLocation = ({
     locationCallback,

packages/ra-core/src/routing/adapters/reactRouterProvider.tsx

@@ -7,18 +7,17 @@ import {
     useBlocker,
     useMatch,
     useInRouterContext,
-    Link,
     Navigate,
     Route,
     Routes,
     Outlet,
     matchPath,
-    createHashRouter,
     RouterProvider as ReactRouterProvider,
     UNSAFE_DataRouterContext,
     UNSAFE_DataRouterStateContext,
     type FutureConfig,
-} from 'react-router-dom';
+} from 'react-router';
+import { Link, createHashRouter } from 'react-router-dom';
 import type {
     RouterProvider,
     RouterWrapperProps,

packages/ra-core/src/routing/useCreatePath.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router';
 
 import { BasenameContextProvider } from './BasenameContextProvider';
 import { useBasename } from './useBasename';

packages/ra-core/src/routing/useRedirect.spec.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import expect from 'expect';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router';
 import { CoreAdminContext } from '../core';
 import { useLocation } from './useLocation';
 

packages/ra-core/src/routing/useRedirect.stories.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
-import {
-    Link,
-    Routes,
-    Route,
-    useLocation,
-    useNavigate,
-} from 'react-router-dom';
+import { Routes, Route, useLocation, useNavigate } from 'react-router';
+import { LinkBase as Link } from './LinkBase';
 
 import { FakeBrowserDecorator } from '../storybook//FakeBrowser';
 import { useRedirect as useRedirectRA } from './useRedirect';

packages/ra-core/src/routing/useScrollToTop.tsx

@@ -7,7 +7,7 @@ import { useLocation } from './useLocation';
  * @see CoreAdminRouter where it's enabled by default
  *
  * @example // usage in buttons
- * import { Link } from 'react-router-dom';
+ * import { LinkBase as Link } from 'ra-core';
  * import { Button } from '@mui/material';
  *
  * const FooButton = () => (

packages/ra-input-rich-text/src/RichTextInput.stories.tsx

@@ -19,7 +19,7 @@ import {
 } from 'ra-ui-materialui';
 import { useWatch } from 'react-hook-form';
 import fakeRestDataProvider from 'ra-data-fakerest';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router';
 import Mention from '@tiptap/extension-mention';
 import { Editor, ReactRenderer } from '@tiptap/react';
 import { computePosition, flip, shift, offset } from '@floating-ui/dom';

packages/ra-no-code/package.json

@@ -30,7 +30,6 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router": "^6.22.0",
-        "react-router-dom": "^6.22.0",
         "typescript": "^5.1.3",
         "zshy": "^0.5.0"
     },

packages/ra-no-code/src/ui/ImportResourceDialog.tsx

@@ -13,7 +13,7 @@ import { useDropzone } from 'react-dropzone';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { useNotify } from 'react-admin';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { useImportResourceFromCsv } from './useImportResourceFromCsv';
 
 export const ImportResourceDialog = (props: ImportResourceDialogProps) => {

packages/ra-no-code/src/ui/ResourceMenuItem.tsx

@@ -1,10 +1,9 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { styled } from '@mui/material/styles';
-import { MenuItemLink, MenuItemLinkProps } from 'react-admin';
+import { LinkBase, MenuItemLink, MenuItemLinkProps } from 'react-admin';
 import { IconButton } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import DefaultIcon from '@mui/icons-material/ViewList';
-import { NavLink, NavLinkProps } from 'react-router-dom';
 import { ResourceConfiguration } from '../ResourceConfiguration';
 
 const PREFIX = 'ResourceMenuItem';
@@ -48,7 +47,7 @@ export const ResourceMenuItem = (
                 {...rest}
             />
             <IconButton
-                component={NavLinkRef}
+                component={LinkBase}
                 to={{
                     pathname: `/configure/${resource.name}`,
                 }}
@@ -60,7 +59,3 @@ export const ResourceMenuItem = (
         </Root>
     );
 };
-
-const NavLinkRef = forwardRef<HTMLAnchorElement, NavLinkProps>((props, ref) => (
-    <NavLink ref={ref} {...props} />
-));