Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for React router v7 #10440

Open
wants to merge 6 commits into
base: mui-6
Choose a base branch
from
Open

Add support for React router v7 #10440

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bcbbdcf
Add support for MUI v6
djhi Jan 8, 2025
2912b63
Fix yarn.lock
djhi Jan 8, 2025
9fd768a
Revert devDependencies to v5
djhi Jan 9, 2025
16a612a
Add support for react-router v7
djhi Jan 9, 2025
528618b
Fix tests
djhi Jan 9, 2025
c9dd0dd
Ensure react-admin uses rr6 locally
djhi Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@
"react": "^19.0.0",
"react-admin": "^5.0.0",
"react-dom": "^19.0.0",
"react-router": "^6.22.0",
"react-router-dom": "^6.22.0",
"react-router": "^7.1.1",
"react-router-dom": "^7.1.1",
"recharts": "^2.15.0"
},
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion examples/demo/src/categories/LinkToRelatedProducts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import Button from '@mui/material/Button';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This used to be only available from react-router-dom so it "proves" we use v7

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a non breaking change way to migrate to react-router v7 is always use react-router-dom package inside react-admin. It is a re-export of react-router https://reactrouter.com/start/changelog#package-restructuring

Then people using react-router v6 won't be affected by such things like import { Link } from 'react-router(v6)'; that does not exist

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I see it is for demo project, not package itself. I misunderstood the previous message.

import { useTranslate, useRecordContext } from 'react-admin';
import { stringify } from 'query-string';

Expand Down
2 changes: 1 addition & 1 deletion examples/demo/src/dashboard/CardWithIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { FC, createElement } from 'react';
import { Card, Box, Typography, Divider } from '@mui/material';
import { Link, To } from 'react-router-dom';
import { Link, To } from 'react-router';
import { ReactNode } from 'react';

interface Props {
Expand Down
2 changes: 1 addition & 1 deletion examples/demo/src/dashboard/NewCustomers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { Avatar, Box, Button } from '@mui/material';
import CustomerIcon from '@mui/icons-material/PersonAdd';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';
import {
ListBase,
WithListContext,
Expand Down
2 changes: 1 addition & 1 deletion examples/demo/src/dashboard/PendingOrder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
Box,
ListItemButton,
} from '@mui/material';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';
import { useTranslate, useReference } from 'react-admin';

import { Customer, Order } from '../types';
Expand Down
2 changes: 1 addition & 1 deletion examples/demo/src/dashboard/PendingReviews.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
ListItemText,
} from '@mui/material';
import CommentIcon from '@mui/icons-material/Comment';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';

import {
ReferenceField,
Expand Down
2 changes: 1 addition & 1 deletion examples/demo/src/layout/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { useState } from 'react';
import { useLocation } from 'react-router-dom';
import { useLocation } from 'react-router';

import {
Avatar,
Expand Down
2 changes: 1 addition & 1 deletion examples/demo/src/products/GridList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import { useTheme, useMediaQuery } from '@mui/material';
import { Box, ImageList, ImageListItem, ImageListItemBar } from '@mui/material';
import { useCreatePath, NumberField, useListContext } from 'react-admin';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';

const GridList = () => {
const { isPending } = useListContext();
Expand Down
2 changes: 1 addition & 1 deletion examples/demo/src/reviews/ReviewList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
TopToolbar,
useDefaultTitle,
} from 'react-admin';
import { matchPath, useLocation, useNavigate } from 'react-router-dom';
import { matchPath, useLocation, useNavigate } from 'react-router';
import { Box, Drawer, useMediaQuery, Theme } from '@mui/material';

import ReviewListMobile from './ReviewListMobile';
Expand Down
2 changes: 1 addition & 1 deletion examples/demo/src/segments/LinkToRelatedCustomers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Button } from '@mui/material';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';
import { useTranslate } from 'react-admin';
import { stringify } from 'query-string';

Expand Down
4 changes: 3 additions & 1 deletion examples/tutorial/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@
"ra-data-json-server": "^5.0.0",
"react": "^19.0.0",
"react-admin": "^5.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"react-router": "^7.1.1",
"react-router-dom": "^7.1.1"
},
"devDependencies": {
"@types/react": "^18.3.3",
Expand Down
4 changes: 2 additions & 2 deletions packages/ra-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0",
"react-hook-form": "^7.53.0",
"react-router": "^6.22.0",
"react-router-dom": "^6.22.0"
"react-router": "^6.22.0 || ^7.0.0",
"react-router-dom": "^6.22.0 || ^7.0.0"
},
"dependencies": {
"@tanstack/react-query": "^5.21.7",
Expand Down
4 changes: 2 additions & 2 deletions packages/ra-ui-materialui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@
"react-dom": "^18.0.0 || ^19.0.0",
"react-hook-form": "*",
"react-is": "^18.0.0 || ^19.0.0",
"react-router": "^6.22.0",
"react-router-dom": "^6.22.0"
"react-router": "^6.22.0 || ^7.0.0",
"react-router-dom": "^6.22.0 || ^7.0.0"
},
"dependencies": {
"@tanstack/react-query": "^5.21.7",
Expand Down
8 changes: 6 additions & 2 deletions packages/react-admin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,12 @@
"watch": "tsc --outDir dist/esm --module es2015 --watch"
},
"devDependencies": {
"@mui/icons-material": "^5.16.12",
"@mui/material": "^5.16.12",
"cross-env": "^5.2.0",
"expect": "^27.4.6",
"react-router": "^6.25.1",
"react-router-dom": "^6.25.1",
"rimraf": "^3.0.2",
"typescript": "^5.1.3"
},
Expand All @@ -43,8 +47,8 @@
"ra-language-english": "^5.4.3",
"ra-ui-materialui": "^5.4.3",
"react-hook-form": "^7.53.0",
"react-router": "^6.22.0",
"react-router-dom": "^6.22.0"
"react-router": "^6.22.0 || ^7.0.0",
"react-router-dom": "^6.22.0 || ^7.0.0"
},
"gitHead": "587df4c27bfcec4a756df4f95e5fc14728dfc0d7"
}
4 changes: 2 additions & 2 deletions packages/react-admin/src/Admin.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { render, screen } from '@testing-library/react';
import { fireEvent, render, screen } from '@testing-library/react';

import { Basic, InsideRouter, SubPath, DefaultError } from './Admin.stories';

Expand All @@ -25,7 +25,7 @@ describe('<Admin>', () => {

it('works when mounted in a subPath', async () => {
render(<SubPath />);
screen.getByText('Go to admin').click();
fireEvent.click(await screen.findByText('Go to admin'));
await screen.findByText('Post List');
screen.getAllByText('Comments')[0].click();
await screen.findByText('Comment List');
Expand Down
7 changes: 7 additions & 0 deletions test-setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,10 @@ global.Request = Request;

/** Mock scrollTo as it is not supported by JSDOM */
global.scrollTo = jest.fn();

/** Mock TextEncoder as it is not supported by JSDOM */
if (!global.TextEncoder || !global.TextDecoder) {
const { TextDecoder, TextEncoder } = require('node:util');
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
}
84 changes: 72 additions & 12 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2892,7 +2892,7 @@ __metadata:
languageName: node
linkType: hard

"@mui/icons-material@npm:^5.16.12 || ^6.0.0, @mui/icons-material@npm:^6.0.0":
"@mui/icons-material@npm:^6.0.0":
version: 6.3.1
resolution: "@mui/icons-material@npm:6.3.1"
dependencies:
Expand Down Expand Up @@ -2941,7 +2941,7 @@ __metadata:
languageName: node
linkType: hard

"@mui/material@npm:^5.16.12 || ^6.0.0, @mui/material@npm:^6.0.0":
"@mui/material@npm:^6.0.0":
version: 6.3.1
resolution: "@mui/material@npm:6.3.1"
dependencies:
Expand Down Expand Up @@ -4883,6 +4883,13 @@ __metadata:
languageName: node
linkType: hard

"@types/cookie@npm:^0.6.0":
version: 0.6.0
resolution: "@types/cookie@npm:0.6.0"
checksum: 5b326bd0188120fb32c0be086b141b1481fec9941b76ad537f9110e10d61ee2636beac145463319c71e4be67a17e85b81ca9e13ceb6e3bb63b93d16824d6c149
languageName: node
linkType: hard

"@types/d3-array@npm:^3.0.3":
version: 3.2.1
resolution: "@types/d3-array@npm:3.2.1"
Expand Down Expand Up @@ -7740,6 +7747,13 @@ __metadata:
languageName: node
linkType: hard

"cookie@npm:^1.0.1":
version: 1.0.2
resolution: "cookie@npm:1.0.2"
checksum: fd25fe79e8fbcfcaf6aa61cd081c55d144eeeba755206c058682257cb38c4bd6795c6620de3f064c740695bb65b7949ebb1db7a95e4636efb8357a335ad3f54b
languageName: node
linkType: hard

"core-js-compat@npm:^3.20.0, core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.36.1":
version: 3.37.1
resolution: "core-js-compat@npm:3.37.1"
Expand Down Expand Up @@ -8560,8 +8574,8 @@ __metadata:
react: "npm:^19.0.0"
react-admin: "npm:^5.0.0"
react-dom: "npm:^19.0.0"
react-router: "npm:^6.22.0"
react-router-dom: "npm:^6.22.0"
react-router: "npm:^7.1.1"
react-router-dom: "npm:^7.1.1"
recharts: "npm:^2.15.0"
rewire: "npm:^5.0.0"
rollup-plugin-visualizer: "npm:^5.12.0"
Expand Down Expand Up @@ -16163,8 +16177,8 @@ __metadata:
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
react-hook-form: ^7.53.0
react-router: ^6.22.0
react-router-dom: ^6.22.0
react-router: ^6.22.0 || ^7.0.0
react-router-dom: ^6.22.0 || ^7.0.0
languageName: unknown
linkType: soft

Expand Down Expand Up @@ -16442,8 +16456,8 @@ __metadata:
react-dom: ^18.0.0 || ^19.0.0
react-hook-form: "*"
react-is: ^18.0.0 || ^19.0.0
react-router: ^6.22.0
react-router-dom: ^6.22.0
react-router: ^6.22.0 || ^7.0.0
react-router-dom: ^6.22.0 || ^7.0.0
languageName: unknown
linkType: soft

Expand Down Expand Up @@ -16584,17 +16598,17 @@ __metadata:
version: 0.0.0-use.local
resolution: "react-admin@workspace:packages/react-admin"
dependencies:
"@mui/icons-material": "npm:^5.16.12 || ^6.0.0"
"@mui/material": "npm:^5.16.12 || ^6.0.0"
"@mui/icons-material": "npm:^5.16.12"
"@mui/material": "npm:^5.16.12"
cross-env: "npm:^5.2.0"
expect: "npm:^27.4.6"
ra-core: "npm:^5.4.3"
ra-i18n-polyglot: "npm:^5.4.3"
ra-language-english: "npm:^5.4.3"
ra-ui-materialui: "npm:^5.4.3"
react-hook-form: "npm:^7.53.0"
react-router: "npm:^6.22.0"
react-router-dom: "npm:^6.22.0"
react-router: "npm:^6.25.1"
react-router-dom: "npm:^6.25.1"
rimraf: "npm:^3.0.2"
typescript: "npm:^5.1.3"
peerDependencies:
Expand Down Expand Up @@ -16833,6 +16847,18 @@ __metadata:
languageName: node
linkType: hard

"react-router-dom@npm:^7.1.1":
version: 7.1.1
resolution: "react-router-dom@npm:7.1.1"
dependencies:
react-router: "npm:7.1.1"
peerDependencies:
react: ">=18"
react-dom: ">=18"
checksum: 2dc5b231dd21aab21378c615b1e373149007d173e90db984e6f708b5ee4b28923b3cf88ce7d6f727be927829b37ba37c01436f9f7abeb84ba3d1bfc9ecd4bc72
languageName: node
linkType: hard

"react-router@npm:6.25.1, react-router@npm:^6.22.0, react-router@npm:^6.25.1":
version: 6.25.1
resolution: "react-router@npm:6.25.1"
Expand All @@ -16844,6 +16870,24 @@ __metadata:
languageName: node
linkType: hard

"react-router@npm:7.1.1, react-router@npm:^7.1.1":
version: 7.1.1
resolution: "react-router@npm:7.1.1"
dependencies:
"@types/cookie": "npm:^0.6.0"
cookie: "npm:^1.0.1"
set-cookie-parser: "npm:^2.6.0"
turbo-stream: "npm:2.4.0"
peerDependencies:
react: ">=18"
react-dom: ">=18"
peerDependenciesMeta:
react-dom:
optional: true
checksum: 39f4859670f286eb2eac29e5830c1f730405701fca0808e5db853ec05e54e55a848c764e10ffd14a7b9b3b2154a0d6449656d7f208b9b3e4b2af780e07bf57a8
languageName: node
linkType: hard

"react-simple-animate@npm:^3.3.12, react-simple-animate@npm:^3.5.3":
version: 3.5.3
resolution: "react-simple-animate@npm:3.5.3"
Expand Down Expand Up @@ -17821,6 +17865,13 @@ __metadata:
languageName: node
linkType: hard

"set-cookie-parser@npm:^2.6.0":
version: 2.7.1
resolution: "set-cookie-parser@npm:2.7.1"
checksum: 060c198c4c92547ac15988256f445eae523f57f2ceefeccf52d30d75dedf6bff22b9c26f756bd44e8e560d44ff4ab2130b178bd2e52ef5571bf7be3bd7632d9a
languageName: node
linkType: hard

"set-function-length@npm:^1.2.1":
version: 1.2.2
resolution: "set-function-length@npm:1.2.2"
Expand Down Expand Up @@ -19044,6 +19095,13 @@ __metadata:
languageName: node
linkType: hard

"turbo-stream@npm:2.4.0":
version: 2.4.0
resolution: "turbo-stream@npm:2.4.0"
checksum: e68b2569f1f16e6e9633d090c6024b2ae9f0e97bfeacb572451ca3732e120ebbb546f3bc4afc717c46cb57b5aea6104e04ef497f9912eef6a7641e809518e98a
languageName: node
linkType: hard

"tutorial@workspace:examples/tutorial":
version: 0.0.0-use.local
resolution: "tutorial@workspace:examples/tutorial"
Expand All @@ -19057,6 +19115,8 @@ __metadata:
react: "npm:^19.0.0"
react-admin: "npm:^5.0.0"
react-dom: "npm:^19.0.0"
react-router: "npm:^7.1.1"
react-router-dom: "npm:^7.1.1"
typescript: "npm:^5.1.3"
vite: "npm:^5.0.11"
languageName: unknown
Expand Down
Loading