[docs] Bump React Router to ^7.0.1 (#44531)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

docs/data/base/components/tabs/UnstyledTabsRouting.js

@@ -5,13 +5,13 @@ import { Tab as BaseTab, tabClasses } from '@mui/base/Tab';
 import { TabsList as BaseTabsList } from '@mui/base/TabsList';
 import {
   MemoryRouter,
+  StaticRouter,
   Route,
   Routes,
   Link,
   matchPath,
   useLocation,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+} from 'react-router';
 import { styled } from '@mui/system';
 
 function Router(props) {

docs/data/base/components/tabs/UnstyledTabsRouting.tsx

@@ -4,13 +4,13 @@ import { Tab as BaseTab, TabRootSlotProps, tabClasses } from '@mui/base/Tab';
 import { TabsList as BaseTabsList } from '@mui/base/TabsList';
 import {
   MemoryRouter,
+  StaticRouter,
   Route,
   Routes,
   Link,
   matchPath,
   useLocation,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+} from 'react-router';
 import { styled } from '@mui/system';
 
 function Router(props: { children?: React.ReactNode }) {

docs/data/joy/components/link/link.md

@@ -125,12 +125,12 @@ import Link from '@mui/joy/Link';
 </NextLink>;
 ```
 
-### React Router
+### React Router
 
-Here is an example with the [Link component](https://reactrouter.com/en/main/components/link) of React Router:
+Here is a demo with the [Link component](https://reactrouter.com/start/library/navigating#link) of [React Router](https://github.com/remix-run/react-router).
 
 ```js
-import { Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router';
 import Link from '@mui/joy/Link';
 
 <Link component={RouterLink} to="/docs">

docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js

@@ -17,7 +17,7 @@ import {
   Routes,
   MemoryRouter,
   useLocation,
-} from 'react-router-dom';
+} from 'react-router';
 
 const breadcrumbNameMap = {
   '/inbox': 'Inbox',

docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx

@@ -16,7 +16,7 @@ import {
   Routes,
   MemoryRouter,
   useLocation,
-} from 'react-router-dom';
+} from 'react-router';
 
 interface ListItemLinkProps extends ListItemProps {
   to: string;

docs/data/material/components/pagination/PaginationLink.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
+import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
 

docs/data/material/components/pagination/PaginationLink.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
+import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
 

docs/data/material/guides/composition/composition.md

@@ -49,10 +49,10 @@ This pattern is very powerful and allows for great flexibility, as well as a way
 
 ### Passing other React components
 
-You can pass any other React component to `component` prop. For example, you can pass `Link` component from `react-router-dom`:
+You can pass any other React component to `component` prop. For example, you can pass `Link` component from `react-router`:
 
 ```tsx
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Button from '@mui/material/Button';
 
 function Demo() {
@@ -84,7 +84,7 @@ Now the `CustomComponent` can be used with a `component` prop which should be se
 In addition, the `CustomComponent` will have all props of a `<a>` HTML element.
 The other props of the `Typography` component will also be present in props of the `CustomComponent`.
 
-You can find a code example with the Button and react-router-dom in [these demos](/material-ui/integrations/routing/#component-prop).
+You can find a code example with the Button and react-router in [these demos](/material-ui/integrations/routing/#component-prop).
 
 ### Generic
 

docs/data/material/integrations/routing/ButtonRouter.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Link as RouterLink, MemoryRouter } from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+import { Link as RouterLink, MemoryRouter, StaticRouter } from 'react-router';
 import Button from '@mui/material/Button';
 
 const LinkBehavior = React.forwardRef((props, ref) => (

docs/data/material/integrations/routing/ButtonRouter.tsx

@@ -3,8 +3,8 @@ import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
   MemoryRouter,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+  StaticRouter,
+} from 'react-router';
 import Button from '@mui/material/Button';
 
 const LinkBehavior = React.forwardRef<any, Omit<RouterLinkProps, 'to'>>(

docs/data/material/integrations/routing/LinkRouter.js

@@ -1,8 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Link as RouterLink, MemoryRouter } from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+import { Link as RouterLink, MemoryRouter, StaticRouter } from 'react-router';
 import Link from '@mui/material/Link';
 import Box from '@mui/material/Box';
 

docs/data/material/integrations/routing/LinkRouter.tsx

@@ -4,8 +4,8 @@ import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
   MemoryRouter,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+  StaticRouter,
+} from 'react-router';
 import Link from '@mui/material/Link';
 import Box from '@mui/material/Box';
 

docs/data/material/integrations/routing/LinkRouterWithTheme.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Link as RouterLink, MemoryRouter } from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+import { Link as RouterLink, MemoryRouter, StaticRouter } from 'react-router';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';

docs/data/material/integrations/routing/LinkRouterWithTheme.tsx

@@ -3,8 +3,8 @@ import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
   MemoryRouter,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+  StaticRouter,
+} from 'react-router';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';

docs/data/material/integrations/routing/ListRouter.js

@@ -11,8 +11,14 @@ import Divider from '@mui/material/Divider';
 import InboxIcon from '@mui/icons-material/Inbox';
 import DraftsIcon from '@mui/icons-material/Drafts';
 import Typography from '@mui/material/Typography';
-import { Link, Route, Routes, MemoryRouter, useLocation } from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+import {
+  Link,
+  Route,
+  Routes,
+  MemoryRouter,
+  useLocation,
+  StaticRouter,
+} from 'react-router';
 
 function Router(props) {
   const { children } = props;

docs/data/material/integrations/routing/ListRouter.tsx

@@ -10,8 +10,14 @@ import Divider from '@mui/material/Divider';
 import InboxIcon from '@mui/icons-material/Inbox';
 import DraftsIcon from '@mui/icons-material/Drafts';
 import Typography from '@mui/material/Typography';
-import { Link, Route, Routes, MemoryRouter, useLocation } from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+import {
+  Link,
+  Route,
+  Routes,
+  MemoryRouter,
+  useLocation,
+  StaticRouter,
+} from 'react-router';
 
 function Router(props: { children?: React.ReactNode }) {
   const { children } = props;

docs/data/material/integrations/routing/TabsRouter.js

@@ -11,8 +11,8 @@ import {
   Link,
   matchPath,
   useLocation,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+  StaticRouter,
+} from 'react-router';
 
 function Router(props) {
   const { children } = props;

docs/data/material/integrations/routing/TabsRouter.tsx

@@ -10,8 +10,8 @@ import {
   Link,
   matchPath,
   useLocation,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+  StaticRouter,
+} from 'react-router';
 
 function Router(props: { children?: React.ReactNode }) {
   const { children } = props;

docs/data/material/integrations/routing/routing.md

@@ -24,7 +24,7 @@ The Material UI theme lets you configure this component once.
 For instance, with react-router:
 
 ```tsx
-import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
+import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router';
 import { LinkProps } from '@mui/material/Link';
 
 const LinkBehavior = React.forwardRef<
@@ -65,9 +65,9 @@ In the event you need to provide a richer structure, see the next section.
 You can achieve the integration with third-party routing libraries with the `component` prop.
 You can learn more about this prop in the **[composition guide](/material-ui/guides/composition/#component-prop)**.
 
-## react-router examples
+## React Router examples
 
-Here are a few demos with [react-router](https://github.com/remix-run/react-router).
+Here are a few demos with the [Link component](https://reactrouter.com/start/library/navigating#link) of [React Router](https://github.com/remix-run/react-router).
 You can apply the same strategy with all the components: BottomNavigation, Card, etc.
 
 ### Link

docs/package.json

@@ -96,7 +96,7 @@
     "react-intersection-observer": "^9.13.1",
     "react-is": "^18.3.1",
     "react-number-format": "^5.4.2",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.1",
     "react-runner": "^1.0.5",
     "react-simple-code-editor": "^0.14.1",
     "react-spring": "^9.7.4",

packages/mui-material/package.json

@@ -70,7 +70,7 @@
     "playwright": "^1.48.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.1",
     "sinon": "^19.0.2"
   },
   "peerDependencies": {

packages/mui-material/src/Button/Button.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link as ReactRouterLink, LinkProps } from 'react-router-dom';
+import { Link as ReactRouterLink, LinkProps } from 'react-router';
 import { expectType } from '@mui/types';
 import Button, { ButtonProps } from '@mui/material/Button';
 import MaterialUiLink, { LinkProps as MaterialUiLinkProps } from '@mui/material/Link';