diff --git a/docs/data/base/components/tabs/UnstyledTabsRouting.js b/docs/data/base/components/tabs/UnstyledTabsRouting.js index 85ff56aeb45dc5..00ad986e4d34fe 100644 --- a/docs/data/base/components/tabs/UnstyledTabsRouting.js +++ b/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) { diff --git a/docs/data/base/components/tabs/UnstyledTabsRouting.tsx b/docs/data/base/components/tabs/UnstyledTabsRouting.tsx index 7175d2b034c5de..6bc3b85b055d43 100644 --- a/docs/data/base/components/tabs/UnstyledTabsRouting.tsx +++ b/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 }) { diff --git a/docs/data/joy/components/link/link.md b/docs/data/joy/components/link/link.md index 3b4f8a91fda5ad..e20fc076ff00b4 100644 --- a/docs/data/joy/components/link/link.md +++ b/docs/data/joy/components/link/link.md @@ -125,12 +125,12 @@ import Link from '@mui/joy/Link'; ; ``` -### 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'; diff --git a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js b/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js index 835108303bd362..2b070f122b380b 100644 --- a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js +++ b/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', diff --git a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx index 6c85d1812cafb5..6e79d9904cf65e 100644 --- a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx +++ b/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; diff --git a/docs/data/material/components/pagination/PaginationLink.js b/docs/data/material/components/pagination/PaginationLink.js index 2c1577815ecf60..317eabab4f0bb2 100644 --- a/docs/data/material/components/pagination/PaginationLink.js +++ b/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'; diff --git a/docs/data/material/components/pagination/PaginationLink.tsx b/docs/data/material/components/pagination/PaginationLink.tsx index 2c1577815ecf60..317eabab4f0bb2 100644 --- a/docs/data/material/components/pagination/PaginationLink.tsx +++ b/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'; diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md index 59274283ed6b7d..00190c9f867791 100644 --- a/docs/data/material/guides/composition/composition.md +++ b/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 `` 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 diff --git a/docs/data/material/integrations/routing/ButtonRouter.js b/docs/data/material/integrations/routing/ButtonRouter.js index 0fac505afd8ee9..e09dc6ddbfee18 100644 --- a/docs/data/material/integrations/routing/ButtonRouter.js +++ b/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) => ( diff --git a/docs/data/material/integrations/routing/ButtonRouter.tsx b/docs/data/material/integrations/routing/ButtonRouter.tsx index 6b91185550d1c7..9e8d32275081a8 100644 --- a/docs/data/material/integrations/routing/ButtonRouter.tsx +++ b/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>( diff --git a/docs/data/material/integrations/routing/LinkRouter.js b/docs/data/material/integrations/routing/LinkRouter.js index bdec73e5996442..d15fde468e884e 100644 --- a/docs/data/material/integrations/routing/LinkRouter.js +++ b/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'; diff --git a/docs/data/material/integrations/routing/LinkRouter.tsx b/docs/data/material/integrations/routing/LinkRouter.tsx index 26d7caf5e7f919..aecdfdd48359c0 100644 --- a/docs/data/material/integrations/routing/LinkRouter.tsx +++ b/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'; diff --git a/docs/data/material/integrations/routing/LinkRouterWithTheme.js b/docs/data/material/integrations/routing/LinkRouterWithTheme.js index 1e1f51a963882a..07fe829876a28b 100644 --- a/docs/data/material/integrations/routing/LinkRouterWithTheme.js +++ b/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'; diff --git a/docs/data/material/integrations/routing/LinkRouterWithTheme.tsx b/docs/data/material/integrations/routing/LinkRouterWithTheme.tsx index 4776d710ae4bdf..0eabdf4f85986e 100644 --- a/docs/data/material/integrations/routing/LinkRouterWithTheme.tsx +++ b/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'; diff --git a/docs/data/material/integrations/routing/ListRouter.js b/docs/data/material/integrations/routing/ListRouter.js index ec3153a65cc5ae..eacda889e7a72b 100644 --- a/docs/data/material/integrations/routing/ListRouter.js +++ b/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; diff --git a/docs/data/material/integrations/routing/ListRouter.tsx b/docs/data/material/integrations/routing/ListRouter.tsx index 669d548181ffca..2c732a1fe4b3ca 100644 --- a/docs/data/material/integrations/routing/ListRouter.tsx +++ b/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; diff --git a/docs/data/material/integrations/routing/TabsRouter.js b/docs/data/material/integrations/routing/TabsRouter.js index 4224347ee2ca8a..e42348e532efe5 100644 --- a/docs/data/material/integrations/routing/TabsRouter.js +++ b/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; diff --git a/docs/data/material/integrations/routing/TabsRouter.tsx b/docs/data/material/integrations/routing/TabsRouter.tsx index e2e0325a3b8eb4..9334804032c3c8 100644 --- a/docs/data/material/integrations/routing/TabsRouter.tsx +++ b/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; diff --git a/docs/data/material/integrations/routing/routing.md b/docs/data/material/integrations/routing/routing.md index 61c245ac6091cf..f8f4dbed948768 100644 --- a/docs/data/material/integrations/routing/routing.md +++ b/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 diff --git a/docs/package.json b/docs/package.json index ddcd6eb6db686d..62a6bc68ad8ee4 100644 --- a/docs/package.json +++ b/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", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 093a1ec57a0331..4b6668b7290c3b 100644 --- a/packages/mui-material/package.json +++ b/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": { diff --git a/packages/mui-material/src/Button/Button.spec.tsx b/packages/mui-material/src/Button/Button.spec.tsx index 832d79dd0599cf..1c84611741a3cb 100644 --- a/packages/mui-material/src/Button/Button.spec.tsx +++ b/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'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cd80ccf9a74ccf..1a33e4071ae7da 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -787,9 +787,9 @@ importers: react-number-format: specifier: ^5.4.2 version: 5.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react-router-dom: - specifier: ^6.28.0 - version: 6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-router: + specifier: ^7.0.1 + version: 7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-runner: specifier: ^1.0.5 version: 1.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1809,9 +1809,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) - react-router-dom: - specifier: ^6.28.0 - version: 6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-router: + specifier: ^7.0.1 + version: 7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) sinon: specifier: ^19.0.2 version: 19.0.2 @@ -2346,9 +2346,9 @@ importers: react-is: specifier: ^18.3.1 version: 18.3.1 - react-router-dom: - specifier: ^6.28.0 - version: 6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-router: + specifier: ^7.0.1 + version: 7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-window: specifier: ^1.8.10 version: 1.8.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -7004,6 +7004,10 @@ packages: resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==} engines: {node: '>= 0.6'} + cookie@1.0.2: + resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==} + engines: {node: '>=18'} + core-js-compat@3.38.1: resolution: {integrity: sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==} @@ -11294,6 +11298,16 @@ packages: peerDependencies: react: '>=16.8' + react-router@7.0.1: + resolution: {integrity: sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==} + engines: {node: '>=20.0.0'} + peerDependencies: + react: '>=18' + react-dom: '>=18' + peerDependenciesMeta: + react-dom: + optional: true + react-runner@1.0.5: resolution: {integrity: sha512-eCIybRpssp6ffjqXqId024esO9UP2lV838Lvm3fC7VgMQ/dQHhR0jJwOY2IPrYD3AaM/bcvMikmASIRZqNUHsw==} peerDependencies: @@ -11750,6 +11764,9 @@ packages: set-blocking@2.0.0: resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==} + set-cookie-parser@2.7.1: + resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==} + set-function-length@1.2.1: resolution: {integrity: sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==} engines: {node: '>= 0.4'} @@ -12463,6 +12480,9 @@ packages: resolution: {integrity: sha512-GwIJau9XaA8nLVbUXsN3IlFi7WmQ48gBUrl3FTkkL/XLu/POhBzfmX9hd33FNMX1qAsfl6ozO1iMmW9NC8YniA==} engines: {node: ^16.14.0 || >=18.0.0} + turbo-stream@2.4.0: + resolution: {integrity: sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==} + type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} @@ -18763,6 +18783,8 @@ snapshots: cookie@0.7.2: {} + cookie@1.0.2: {} + core-js-compat@3.38.1: dependencies: browserslist: 4.24.0 @@ -24120,6 +24142,16 @@ snapshots: '@remix-run/router': 1.21.0 react: 18.3.1 + react-router@7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@types/cookie': 0.6.0 + cookie: 1.0.2 + react: 18.3.1 + set-cookie-parser: 2.7.1 + turbo-stream: 2.4.0 + optionalDependencies: + react-dom: 18.3.1(react@18.3.1) + react-runner@1.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: react: 18.3.1 @@ -24714,6 +24746,8 @@ snapshots: set-blocking@2.0.0: {} + set-cookie-parser@2.7.1: {} + set-function-length@1.2.1: dependencies: define-data-property: 1.1.4 @@ -25568,6 +25602,8 @@ snapshots: transitivePeerDependencies: - supports-color + turbo-stream@2.4.0: {} + type-check@0.4.0: dependencies: prelude-ls: 1.2.1 diff --git a/test/e2e/index.js b/test/e2e/index.js index e0c3ff8a1a9924..21d5fb9a5d85e6 100644 --- a/test/e2e/index.js +++ b/test/e2e/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as ReactDOMClient from 'react-dom/client'; -import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; +import { BrowserRouter as Router, Routes, Route, Link } from 'react-router'; import * as DomTestingLibrary from '@testing-library/dom'; import TestViewer from './TestViewer'; diff --git a/test/integration/material-ui/components.spec.tsx b/test/integration/material-ui/components.spec.tsx index acd340e2353d7e..295bb3046c8efe 100644 --- a/test/integration/material-ui/components.spec.tsx +++ b/test/integration/material-ui/components.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { createStyles } from '@mui/styles'; -import { Link as ReactRouterLink, LinkProps as ReactRouterLinkProps } from 'react-router-dom'; +import { Link as ReactRouterLink, LinkProps as ReactRouterLinkProps } from 'react-router'; import { expectType } from '@mui/types'; import { AppBar, diff --git a/test/package.json b/test/package.json index 74002bf5257285..ab211677293940 100644 --- a/test/package.json +++ b/test/package.json @@ -34,7 +34,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-is": "^18.3.1", - "react-router-dom": "^6.28.0", + "react-router": "^7.0.1", "react-window": "^1.8.10", "sinon": "^19.0.2", "styled-components": "^6.1.13", diff --git a/test/regressions/index.js b/test/regressions/index.js index 8d377681dfb032..1f069dc1bd703f 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import * as ReactDOMClient from 'react-dom/client'; -import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom'; +import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router'; import webfontloader from 'webfontloader'; import { Globals } from '@react-spring/web'; import TestViewer from './TestViewer';