Bump react-router-dom to ^6.0.1 (mui#29553)

Co-authored-by: Renovate Bot <[email protected]> Co-authored-by: eps1lon <[email protected]> Co-authored-by: Michał Dudak <[email protected]>
LongHaoo · Dec 1, 2021 · 38ac830 · 38ac830
1 parent 4323c77
commit 38ac830
Show file tree

Hide file tree

Showing 26 changed files with 492 additions and 284 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -51,7 +51,6 @@
     "@types/json2mq": "^0.2.0",
     "@types/markdown-to-jsx": "^7.0.1",
     "@types/react-dom": "^17.0.11",
-    "@types/react-router-dom": "^5.3.2",
     "@types/react-swipeable-views": "^0.13.1",
     "@types/react-swipeable-views-utils": "^0.13.3",
     "@types/react-virtualized": "^9.21.15",
@@ -103,7 +102,7 @@
     "react-intersection-observer": "^8.32.5",
     "react-is": "^17.0.2",
     "react-number-format": "^4.8.0",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.0.1",
     "react-spring": "^8.0.27",
     "react-swipeable-views": "^0.14.0",
     "react-transition-group": "^4.4.2",

diff --git a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js
@@ -10,7 +10,13 @@ import Typography from '@mui/material/Typography';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Breadcrumbs from '@mui/material/Breadcrumbs';
-import { Link as RouterLink, Route, MemoryRouter } from 'react-router-dom';
+import {
+  Link as RouterLink,
+  Route,
+  Routes,
+  MemoryRouter,
+  useLocation,
+} from 'react-router-dom';
 
 const breadcrumbNameMap = {
   '/inbox': 'Inbox',
@@ -46,6 +52,33 @@ ListItemLink.propTypes = {
 
 const LinkRouter = (props) => <Link {...props} component={RouterLink} />;
 
+const Page = () => {
+  const location = useLocation();
+  const pathnames = location.pathname.split('/').filter((x) => x);
+
+  return (
+    <Breadcrumbs aria-label="breadcrumb">
+      <LinkRouter underline="hover" color="inherit" to="/">
+        Home
+      </LinkRouter>
+      {pathnames.map((value, index) => {
+        const last = index === pathnames.length - 1;
+        const to = `/${pathnames.slice(0, index + 1).join('/')}`;
+
+        return last ? (
+          <Typography color="text.primary" key={to}>
+            {breadcrumbNameMap[to]}
+          </Typography>
+        ) : (
+          <LinkRouter underline="hover" color="inherit" to={to} key={to}>
+            {breadcrumbNameMap[to]}
+          </LinkRouter>
+        );
+      })}
+    </Breadcrumbs>
+  );
+};
+
 export default function RouterBreadcrumbs() {
   const [open, setOpen] = React.useState(true);
 
@@ -56,33 +89,9 @@ export default function RouterBreadcrumbs() {
   return (
     <MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
       <Box sx={{ display: 'flex', flexDirection: 'column', width: 360 }}>
-        <Route>
-          {({ location }) => {
-            const pathnames = location.pathname.split('/').filter((x) => x);
-
-            return (
-              <Breadcrumbs aria-label="breadcrumb">
-                <LinkRouter underline="hover" color="inherit" to="/">
-                  Home
-                </LinkRouter>
-                {pathnames.map((value, index) => {
-                  const last = index === pathnames.length - 1;
-                  const to = `/${pathnames.slice(0, index + 1).join('/')}`;
-
-                  return last ? (
-                    <Typography color="text.primary" key={to}>
-                      {breadcrumbNameMap[to]}
-                    </Typography>
-                  ) : (
-                    <LinkRouter underline="hover" color="inherit" to={to} key={to}>
-                      {breadcrumbNameMap[to]}
-                    </LinkRouter>
-                  );
-                })}
-              </Breadcrumbs>
-            );
-          }}
-        </Route>
+        <Routes>
+          <Route path="*" element={<Page />} />
+        </Routes>
         <Box
           sx={{
             bgcolor: 'background.paper',

diff --git a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx
@@ -9,7 +9,13 @@ import Typography from '@mui/material/Typography';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Breadcrumbs from '@mui/material/Breadcrumbs';
-import { Link as RouterLink, Route, MemoryRouter } from 'react-router-dom';
+import {
+  Link as RouterLink,
+  Route,
+  Routes,
+  MemoryRouter,
+  useLocation,
+} from 'react-router-dom';
 
 interface ListItemLinkProps extends ListItemProps {
   to: string;
@@ -52,6 +58,33 @@ const LinkRouter = (props: LinkRouterProps) => (
   <Link {...props} component={RouterLink as any} />
 );
 
+const Page = () => {
+  const location = useLocation();
+  const pathnames = location.pathname.split('/').filter((x) => x);
+
+  return (
+    <Breadcrumbs aria-label="breadcrumb">
+      <LinkRouter underline="hover" color="inherit" to="/">
+        Home
+      </LinkRouter>
+      {pathnames.map((value, index) => {
+        const last = index === pathnames.length - 1;
+        const to = `/${pathnames.slice(0, index + 1).join('/')}`;
+
+        return last ? (
+          <Typography color="text.primary" key={to}>
+            {breadcrumbNameMap[to]}
+          </Typography>
+        ) : (
+          <LinkRouter underline="hover" color="inherit" to={to} key={to}>
+            {breadcrumbNameMap[to]}
+          </LinkRouter>
+        );
+      })}
+    </Breadcrumbs>
+  );
+};
+
 export default function RouterBreadcrumbs() {
   const [open, setOpen] = React.useState(true);
 
@@ -62,33 +95,9 @@ export default function RouterBreadcrumbs() {
   return (
     <MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
       <Box sx={{ display: 'flex', flexDirection: 'column', width: 360 }}>
-        <Route>
-          {({ location }) => {
-            const pathnames = location.pathname.split('/').filter((x) => x);
-
-            return (
-              <Breadcrumbs aria-label="breadcrumb">
-                <LinkRouter underline="hover" color="inherit" to="/">
-                  Home
-                </LinkRouter>
-                {pathnames.map((value, index) => {
-                  const last = index === pathnames.length - 1;
-                  const to = `/${pathnames.slice(0, index + 1).join('/')}`;
-
-                  return last ? (
-                    <Typography color="text.primary" key={to}>
-                      {breadcrumbNameMap[to]}
-                    </Typography>
-                  ) : (
-                    <LinkRouter underline="hover" color="inherit" to={to} key={to}>
-                      {breadcrumbNameMap[to]}
-                    </LinkRouter>
-                  );
-                })}
-              </Breadcrumbs>
-            );
-          }}
-        </Route>
+        <Routes>
+          <Route path="*" element={<Page />} />
+        </Routes>
         <Box
           sx={{
             bgcolor: 'background.paper',

diff --git a/docs/src/pages/components/pagination/PaginationLink.js b/docs/src/pages/components/pagination/PaginationLink.js
@@ -1,30 +1,33 @@
 import * as React from 'react';
-import { Link, MemoryRouter, Route } from 'react-router-dom';
+import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
 
+function Content() {
+  const location = useLocation();
+  const query = new URLSearchParams(location.search);
+  const page = parseInt(query.get('page') || '1', 10);
+  return (
+    <Pagination
+      page={page}
+      count={10}
+      renderItem={(item) => (
+        <PaginationItem
+          component={Link}
+          to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}
+          {...item}
+        />
+      )}
+    />
+  );
+}
+
 export default function PaginationLink() {
   return (
     <MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
-      <Route>
-        {({ location }) => {
-          const query = new URLSearchParams(location.search);
-          const page = parseInt(query.get('page') || '1', 10);
-          return (
-            <Pagination
-              page={page}
-              count={10}
-              renderItem={(item) => (
-                <PaginationItem
-                  component={Link}
-                  to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}
-                  {...item}
-                />
-              )}
-            />
-          );
-        }}
-      </Route>
+      <Routes>
+        <Route path="*" element={<Content />} />
+      </Routes>
     </MemoryRouter>
   );
 }
diff --git a/docs/src/pages/components/pagination/PaginationLink.tsx b/docs/src/pages/components/pagination/PaginationLink.tsx
@@ -1,30 +1,33 @@
 import * as React from 'react';
-import { Link, MemoryRouter, Route } from 'react-router-dom';
+import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
 
+function Content() {
+  const location = useLocation();
+  const query = new URLSearchParams(location.search);
+  const page = parseInt(query.get('page') || '1', 10);
+  return (
+    <Pagination
+      page={page}
+      count={10}
+      renderItem={(item) => (
+        <PaginationItem
+          component={Link}
+          to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}
+          {...item}
+        />
+      )}
+    />
+  );
+}
+
 export default function PaginationLink() {
   return (
     <MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
-      <Route>
-        {({ location }) => {
-          const query = new URLSearchParams(location.search);
-          const page = parseInt(query.get('page') || '1', 10);
-          return (
-            <Pagination
-              page={page}
-              count={10}
-              renderItem={(item) => (
-                <PaginationItem
-                  component={Link}
-                  to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}
-                  {...item}
-                />
-              )}
-            />
-          );
-        }}
-      </Route>
+      <Routes>
+        <Route path="*" element={<Content />} />
+      </Routes>
     </MemoryRouter>
   );
 }
diff --git a/docs/src/pages/components/pagination/PaginationLink.tsx.preview b/docs/src/pages/components/pagination/PaginationLink.tsx.preview
@@ -0,0 +1,5 @@
+<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
+  <Routes>
+    <Route path="*" element={<Content />} />
+  </Routes>
+</MemoryRouter>
diff --git a/docs/src/pages/guides/routing/ButtonRouter.js b/docs/src/pages/guides/routing/ButtonRouter.js
@@ -1,11 +1,26 @@
 import * as React from 'react';
-import { Link as RouterLink, MemoryRouter as Router } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Link as RouterLink, MemoryRouter } from 'react-router-dom';
+import { StaticRouter } from 'react-router-dom/server';
 import Button from '@mui/material/Button';
 
 const LinkBehavior = React.forwardRef((props, ref) => (
   <RouterLink ref={ref} to="/" {...props} role={undefined} />
 ));
 
+function Router(props) {
+  const { children } = props;
+  if (typeof window === 'undefined') {
+    return <StaticRouter location="/">{children}</StaticRouter>;
+  }
+
+  return <MemoryRouter>{children}</MemoryRouter>;
+}
+
+Router.propTypes = {
+  children: PropTypes.node,
+};
+
 export default function ButtonRouter() {
   return (
     <div>

diff --git a/docs/src/pages/guides/routing/ButtonRouter.tsx b/docs/src/pages/guides/routing/ButtonRouter.tsx
@@ -2,14 +2,24 @@ import * as React from 'react';
 import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
-  MemoryRouter as Router,
+  MemoryRouter,
 } from 'react-router-dom';
+import { StaticRouter } from 'react-router-dom/server';
 import Button from '@mui/material/Button';
 
 const LinkBehavior = React.forwardRef<any, Omit<RouterLinkProps, 'to'>>(
   (props, ref) => <RouterLink ref={ref} to="/" {...props} role={undefined} />,
 );
 
+function Router(props: { children?: React.ReactNode }) {
+  const { children } = props;
+  if (typeof window === 'undefined') {
+    return <StaticRouter location="/">{children}</StaticRouter>;
+  }
+
+  return <MemoryRouter>{children}</MemoryRouter>;
+}
+
 export default function ButtonRouter() {
   return (
     <div>

diff --git a/docs/src/pages/guides/routing/LinkRouter.js b/docs/src/pages/guides/routing/LinkRouter.js
@@ -1,13 +1,28 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react';
-import { Link as RouterLink, MemoryRouter as Router } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Link as RouterLink, MemoryRouter } from 'react-router-dom';
+import { StaticRouter } from 'react-router-dom/server';
 import Link from '@mui/material/Link';
 import Box from '@mui/material/Box';
 
 const LinkBehavior = React.forwardRef((props, ref) => (
   <RouterLink ref={ref} to="/getting-started/installation/" {...props} />
 ));
 
+function Router(props) {
+  const { children } = props;
+  if (typeof window === 'undefined') {
+    return <StaticRouter location="/">{children}</StaticRouter>;
+  }
+
+  return <MemoryRouter>{children}</MemoryRouter>;
+}
+
+Router.propTypes = {
+  children: PropTypes.node,
+};
+
 export default function LinkRouter() {
   return (
     <Box sx={{ typography: 'body1' }}>