react-router-dom v6でSwitchが使えない。(export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' )

react-router-domをv5からv6.24.1へアップデートするとSwitchが使えない

エラーが発生しているコード。

import './App.css';

import { BrowserRouter, Link, Switch, Route, Routes } from 'react-router-dom';

import { Home } from './Home';
import { Page1 } from './Page1';
import { Page2 } from './Page2';

export default function App() {

  return (
    <BrowserRouter>
      <div className="App">
          <Link to='/'>Home</Link>
          <br />
          <Link to='/page1'>Page1</Link>
          <br />
          <Link to='/page2'>Page2</Link>
      </div>
      <Switch>
        <Route path='/page1'>
          <Page1 />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

エラー内容

ERROR in ./src/App.js 48:35-41
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_ErrorResponseImpl, UNSAFE_FetchersContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_HistoryRouter, unstable_usePrompt, unstable_useViewTransitionState, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit)

Routesを使うと解消する

v6からSwitchではなくRoutesを使って欲しいみたいです。

import './App.css';

import { BrowserRouter, Link, Switch, Route, Routes } from 'react-router-dom';

import { Home } from './Home';
import { Page1 } from './Page1';
import { Page2 } from './Page2';

export default function App() {

  return (
    <BrowserRouter>
      <div className="App">
          <Link to='/'>Home</Link>
          <br />
          <Link to='/page1'>Page1</Link>
          <br />
          <Link to='/page2'>Page2</Link>
      </div>
-     <Switch>
-       <Route path='/page1'>
-         <Page1 />
-       </Route>
-     </Switch>
+     <Routes>
+       <Route path='/page1' element={<Page1 />} />
+     </Routes>
    </BrowserRouter>
  );
}

switchだとlinkとの兼ね合いで到達できないパスができるバグがあったようです。
▼公式ドキュメント
https://reactrouter.com/en/main/upgrading/v5#upgrade-all-switch-elements-to-routes:~:text=React%20Router%20v6%20introduces%20a%20Routes%20component%20that%20is%20kind%20of%20like%20Switch%2C%20but%20a%20lot%20more%20powerful.%20The%20main%20advantages%20of%20Routes%20over%20Switch%20are%3A