Add support for React router v8 by smeng9 · Pull Request #11289 · marmelab/react-admin

smeng9 · 2026-06-22T23:24:44Z

Problem

react-router v8 is out

Solution

Follow #10440

Add support for React router v8

Find a way to avoid dependency resolution issue after dropping react-router-dom

How To Test

Build RA packages locally, then link with apps in /examples folder

Additional Checks

The PR targets master for a bugfix or a documentation fix, or next for a feature
next branch seems is disappeared, I assume master branch can be used for new features.
The PR includes unit tests (if not possible, describe why)
Needs to be end-2-end tested with /examples folder.
The PR includes one or several stories (if not possible, describe why)
Stories using the routers are updated.
The documentation is up to date

Also, please make sure to read the contributing guidelines.

fzaninotto · 2026-06-23T09:29:06Z

Thanks for your PR, but U'm not fan of the extra compatibility layer & the partial reimplementation. I'd prefer if you created an entirely new adapter for react-router v8 (in a new package). We'd probably need to move the current routing adapter to a package, too.

React Router v8 merged react-router-dom into react-router and requires React 19. Rather than adding a compatibility layer and partial reimplementation inside ra-core (per review feedback on marmelab#11289), v8 support ships as a standalone, opt-in adapter package mirroring ra-router-tanstack. The adapter is a thin pass-through over react-router v8's native API: the obsolete v6/v7 `future` flags are dropped (now defaults in v8) and imports come from `react-router` instead of `react-router-dom`. ra-core keeps its built-in react-router v6/v7 adapter as the default, so existing apps are unaffected. The package is ESM-only because react-router v8 is ESM-only. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

After merging the ra-router-react-router-v8 package, the in-core react-router adapter no longer needs the compatibility shims: - reactRouterProvider imports everything from `react-router`, with only `Link` and `createHashRouter` from `react-router-dom` - Form.stories uses `HashRouter` from `react-router-dom` directly - Remove CompatHashRouter, CompatLink and their tests - Restore `react-router-dom` to the dependencies of ra-core, ra-ui-materialui and react-admin, and narrow the react-router range back to ^6.28.1 || ^7.1.1 (v8 is supported via the separate package) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

No code in ra-ui-materialui imports react-router-dom; all routing imports come from react-router. ra-core declares its own react-router-dom peer for its router adapter. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Individual zshy builds had rewritten the exports field to the flat pre-normalization form. Restore the nested import/require form that update-package-exports produces and that matches upstream. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…-exports update-package-exports forces dual import/require exports on every package; the ESM-only v8 adapter must keep its ESM-only exports (it has no .cjs build). Also keep minor README/story/doc wording. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

zshy's ESM build pass already uses Bundler resolution and cjs is disabled, so these compilerOptions are not needed for the build. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

smeng9 · 2026-06-23T21:12:48Z

Hi @fzaninotto

The ra-router-react-router-v8 is pulled out to a separate package

fzaninotto

Thanks. Several remarks:

This is a new feature, so it must be PRed against nextand not master
As RR v7 is still loaded by default by ra-core, users of RRv8 will end up with 2 versions of RR, leading to probable context conflicts. You also need to extract the default RRv7 adapter to a package in the monorepo
The new RRv8 adapter needs unit tests in addition to user stories
you also need to test the basename feature (check the tests of the tanstack router adapter)

fzaninotto · 2026-06-24T07:24:01Z

+                            </li>
+                        ))}
+                    </ul>
+                    <button onClick={() => navigate('/posts/create')}>


why not use test-ui's CreateButton?

fzaninotto · 2026-06-24T07:24:35Z

+    const { id } = useParams<{ id: string }>();
+    return (
+        <ShowBase resource="posts" id={id}>
+            <PostShowView onEdit={() => navigate(`/posts/${id}`)} />


Why do you need a specific onEdit? It should work without it.

fzaninotto · 2026-06-24T07:25:11Z

+    );
+};
+
+const PostShowView = ({ onEdit }: { onEdit: () => void }) => {


Use test-ui's SimpleShowLayout

fzaninotto · 2026-06-24T07:26:08Z

+};
+
+const PostEdit = () => {
+    const { id } = useParams<{ id: string }>();


This should not be nevessary, EditBase already reads the route params

fzaninotto · 2026-06-24T07:26:32Z

+    <ListBase
+        resource="comments"
+        render={({ data }) => (
+            <ul>


use simpleList from test-ui

fzaninotto · 2026-06-24T07:28:25Z

+ * BasicStandalone: react-admin runs on its own hash router created by the
+ * react-router v8 provider (no surrounding router).
+ */
+export const BasicStandalone = () => (


by convention, the most basic story is called Basic in ra

fzaninotto · 2026-06-24T07:29:55Z

+        dataProvider={dataProvider}
+        layout={Layout}
+    >
+        <Resource name="posts" list={PostList} show={PostShow} />


to test the Link component, I suggest you use custom routes and no resource

fzaninotto · 2026-06-24T07:30:39Z

+        layout={Layout}
+    >
+        <CustomRoutes>
+            <Route path="/" element={<RedirectToPosts />} />


This is already the default behavior of react-admin (redirecting to the first resourc elist if no dashboard when accessing /)

fzaninotto · 2026-06-24T07:31:26Z

+        dataProvider={dataProvider}
+        layout={Layout}
+    >
+        <Resource name="posts" list={PostList} show={PostShow} />


same: use a customRoute to test this hook

fzaninotto · 2026-06-24T07:32:02Z

+ * UseBlockerTest: blocks navigation while a form is dirty.
+ */
+const BlockerForm = () => {
+    const [dirty, setDirty] = React.useState(false);


I suggest you use useWarnWhenUnsavedChanges instead of reimplementing it.

smeng9 · 2026-06-24T10:18:37Z

Hi @fzaninotto

Can you restore the next branch, then I can target this merge request against the correct branch? This branch is probably accidentally deleted in your repo.

I have already noted this in the additional checks.

fzaninotto · 2026-06-24T14:41:11Z

Sure, the next branch is now up again.

Shaoyu Meng added 3 commits June 22, 2026 18:03

support react-router v8

9ef5fdc

update comments

6c3b189

update lock file

352bcd5

smeng9 force-pushed the master branch from a9da6e3 to 352bcd5 Compare June 23, 2026 01:26

fix missing error boundary tests

0df7e82

Shaoyu Meng and others added 9 commits June 23, 2026 07:13

docs: Note deferred unit tests pending React 19 test lane

d8b41fc

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Merge branch 'feature/react-router-v8' into react-router-v8-old

cd163ee

build: Keep react-router ^8.0.0 in the peer/dependency range

e85b130

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

build: Drop redundant module/moduleResolution from v8 adapter tsconfig

61e650d

zshy's ESM build pass already uses Bundler resolution and cjs is disabled, so these compilerOptions are not needed for the build. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fzaninotto requested changes Jun 24, 2026

View reviewed changes

Uh oh!

Conversation

smeng9 commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

How To Test

Additional Checks

Uh oh!

fzaninotto commented Jun 23, 2026

Uh oh!

smeng9 commented Jun 23, 2026

Uh oh!

fzaninotto left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smeng9 commented Jun 24, 2026

Uh oh!

fzaninotto commented Jun 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

smeng9 commented Jun 22, 2026 •

edited

Loading