Upgrade react-router to 6.22.0, use data router, stabilize useWarnWhenUnsavedChanges and remove <Admin history> prop

examples/crm/package.json

@@ -19,8 +19,8 @@
         "react-admin": "^4.12.0",
         "react-dom": "^18.2.0",
         "react-error-boundary": "^3.1.4",
-        "react-router": "^6.1.0",
-        "react-router-dom": "^6.1.0"
+        "react-router": "^6.22.0",
+        "react-router-dom": "^6.22.0"
     },
     "devDependencies": {
         "@testing-library/jest-dom": "^6.1.4",

examples/demo/package.json

@@ -32,8 +32,8 @@
         "react": "^18.0.0",
         "react-admin": "^4.12.0",
         "react-dom": "^18.2.0",
-        "react-router": "^6.1.0",
-        "react-router-dom": "^6.1.0",
+        "react-router": "^6.22.0",
+        "react-router-dom": "^6.22.0",
         "recharts": "^2.1.15"
     },
     "scripts": {

examples/simple/package.json

@@ -28,8 +28,8 @@
         "react-admin": "^4.16.2",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.43.9",
-        "react-router": "^6.1.0",
-        "react-router-dom": "^6.1.0"
+        "react-router": "^6.22.0",
+        "react-router-dom": "^6.22.0"
     },
     "devDependencies": {
         "@hookform/devtools": "^4.0.2",

examples/simple/src/data.tsx

@@ -121,6 +121,7 @@ export default {
             average_note: 3,
             commentable: true,
             published_at: new Date('2012-08-05'),
+            tags: [],
             category: 'tech',
             notifications: [12, 31, 42],
         },

examples/simple/src/dataProvider.tsx

@@ -120,7 +120,7 @@ const delayedDataProvider = new Proxy(sometimesFailsDataProvider, {
             setTimeout(
                 () =>
                     resolve(sometimesFailsDataProvider[name](resource, params)),
-                300
+                2000
             )
         );
     },

examples/simple/src/index.tsx

@@ -1,6 +1,5 @@
-/* eslint react/jsx-key: off */
 import * as React from 'react';
-import { Admin, Resource, CustomRoutes } from 'react-admin'; // eslint-disable-line import/no-unresolved
+import { Admin, Resource, CustomRoutes } from 'react-admin';
 import { createRoot } from 'react-dom/client';
 import { Route } from 'react-router-dom';
 
@@ -16,55 +15,59 @@ import users from './users';
 import tags from './tags';
 import { queryClient } from './queryClient';
 
+const App = () => (
+    <Admin
+        authProvider={authProvider}
+        dataProvider={dataProvider}
+        i18nProvider={i18nProvider}
+        queryClient={queryClient}
+        title="Example Admin"
+        layout={Layout}
+    >
+        <CustomRoutes noLayout>
+            <Route
+                path="/custom"
+                element={<CustomRouteNoLayout title="Posts from /custom" />}
+            />
+        </CustomRoutes>
+        <Resource name="posts" {...posts} />
+        <Resource name="comments" {...comments} />
+        <Resource name="tags" {...tags} />
+        {permissions => (
+            <>
+                {permissions ? <Resource name="users" {...users} /> : null}
+                <CustomRoutes noLayout>
+                    <Route
+                        path="/custom1"
+                        element={
+                            <CustomRouteNoLayout title="Posts from /custom1" />
+                        }
+                    />
+                </CustomRoutes>
+                <CustomRoutes>
+                    <Route
+                        path="/custom2"
+                        element={
+                            <CustomRouteLayout title="Posts from /custom2" />
+                        }
+                    />
+                </CustomRoutes>
+            </>
+        )}
+        <CustomRoutes>
+            <Route
+                path="/custom3"
+                element={<CustomRouteLayout title="Posts from /custom3" />}
+            />
+        </CustomRoutes>
+    </Admin>
+);
+
 const container = document.getElementById('root');
 const root = createRoot(container);
 
 root.render(
     <React.StrictMode>
-        <Admin
-            authProvider={authProvider}
-            dataProvider={dataProvider}
-            i18nProvider={i18nProvider}
-            queryClient={queryClient}
-            title="Example Admin"
-            layout={Layout}
-        >
-            <CustomRoutes noLayout>
-                <Route
-                    path="/custom"
-                    element={<CustomRouteNoLayout title="Posts from /custom" />}
-                />
-            </CustomRoutes>
-            <Resource name="posts" {...posts} />
-            <Resource name="comments" {...comments} />
-            <Resource name="tags" {...tags} />
-            {permissions => (
-                <>
-                    {permissions ? <Resource name="users" {...users} /> : null}
-                    <CustomRoutes noLayout>
-                        <Route
-                            path="/custom1"
-                            element={
-                                <CustomRouteNoLayout title="Posts from /custom1" />
-                            }
-                        />
-                    </CustomRoutes>
-                    <CustomRoutes>
-                        <Route
-                            path="/custom2"
-                            element={
-                                <CustomRouteLayout title="Posts from /custom2" />
-                            }
-                        />
-                    </CustomRoutes>
-                </>
-            )}
-            <CustomRoutes>
-                <Route
-                    path="/custom3"
-                    element={<CustomRouteLayout title="Posts from /custom3" />}
-                />
-            </CustomRoutes>
-        </Admin>
+        <App />
     </React.StrictMode>
 );

examples/simple/src/posts/PostEdit.tsx

@@ -103,7 +103,17 @@ const categories = [
 const PostEdit = () => {
     const { permissions } = usePermissions();
     return (
-        <Edit title={<PostTitle />} actions={<EditActions />}>
+        <Edit
+            title={<PostTitle />}
+            actions={<EditActions />}
+            mutationMode="pessimistic"
+            redirect="show"
+            // mutationOptions={{
+            //     onSuccess: () => {
+            //         console.log('success!');
+            //     },
+            // }}
+        >
             <TabbedForm
                 defaultValues={{ average_note: 0 }}
                 warnWhenUnsavedChanges

packages/ra-core/package.json

@@ -40,8 +40,8 @@
         "react": "^18.0.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.43.9",
-        "react-router": "^6.1.0",
-        "react-router-dom": "^6.1.0",
+        "react-router": "^6.22.0",
+        "react-router-dom": "^6.22.0",
         "react-test-renderer": "^18.2.0",
         "recharts": "^2.1.15",
         "rimraf": "^3.0.2",
@@ -54,8 +54,8 @@
         "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0",
         "react-hook-form": "^7.43.9",
-        "react-router": "^6.1.0",
-        "react-router-dom": "^6.1.0"
+        "react-router": "^6.22.0",
+        "react-router-dom": "^6.22.0"
     },
     "dependencies": {
         "@tanstack/react-query": "^5.8.4",

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import expect from 'expect';
 import { render, screen, waitFor } from '@testing-library/react';
-import { createMemoryHistory } from 'history';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
 import { memoryStore } from '../store';
 import { CoreAdminContext } from '../core';
 import { useNotificationContext } from '../notification';
 import { Authenticated } from './Authenticated';
+import { TestMemoryRouter } from '../routing';
 
 describe('<Authenticated>', () => {
     const Foo = () => <div>Foo</div>;
@@ -44,7 +44,6 @@ describe('<Authenticated>', () => {
         };
         const store = memoryStore();
         const reset = jest.spyOn(store, 'reset');
-        const history = createMemoryHistory();
 
         const Login = () => {
             const location = useLocation();
@@ -65,25 +64,24 @@ describe('<Authenticated>', () => {
         };
 
         render(
-            <CoreAdminContext
-                authProvider={authProvider}
-                store={store}
-                history={history}
-            >
-                <Notification />
-                <Routes>
-                    <Route
-                        path="/"
-                        element={
-                            <Authenticated>
-                                <Foo />
-                            </Authenticated>
-                        }
-                    />
-                    <Route path="/login" element={<Login />} />
-                </Routes>
-            </CoreAdminContext>
+            <TestMemoryRouter>
+                <CoreAdminContext authProvider={authProvider} store={store}>
+                    <Notification />
+                    <Routes>
+                        <Route
+                            path="/"
+                            element={
+                                <Authenticated>
+                                    <Foo />
+                                </Authenticated>
+                            }
+                        />
+                        <Route path="/login" element={<Login />} />
+                    </Routes>
+                </CoreAdminContext>
+            </TestMemoryRouter>
         );
+
         await waitFor(() => {
             expect(authProvider.checkAuth.mock.calls[0][0]).toEqual({});
             expect(authProvider.logout.mock.calls[0][0]).toEqual({});