【React Router v6】Attempted import error: 'Switch' is not exported from 'react-router' というエラーの解消法

結論

特に変なことはしていないのにエラーが出ている場合、もしかしたらあなたのReact Routerのバージョンの影響かも？
まずはReact Routerのバージョンを確認。
v6であればv5の時と記述法が変わったので、React Router v6の書き方でRoute設定をする。

v5までの記法

Router.jsx

import { BrowserRouter, Route, Switch } from "react-router-dom";
import { Top } from "../components/pages/Top";
import { Users } from "../components/pages/Users";

export const Router = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/" >
                    <Top />
                </Route>
                <Route path="/users" >
                    <Users />
                </Route>
            </Switch>
        </BrowserRouter>
    );
};

v6の記法

上記v5の記法との違いとしては下記の2点です。

• import文のSwitchがなくなり、代わりにRoutesにしてあげる。
• Routeコンポーネントの中にelementを定義し、pathにマッチした時にどのコンポーネントをレンダリングするかを指定する。

Router.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Top } from "../components/pages/Top";
import { Users } from "../components/pages/Users";

export const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Top />} />
                <Route path="/users" element={<Users />} />
            </Routes>
        </BrowserRouter>
    );
};

v5からの改善点としては、下記があげられるようです。

• 階層構造のパスが直感的に設定出来るようになった
• Routeが設定の順番に左右されなくなった(現在のURLに最適なRouteを自動的に選択)
• コード分割が容易になり、遅延ロードも書きやすくなった
• 今までのReact Routerよりもコードがコンパクトになりやすい
• バンドルサイズが減少する

確かに分かりやすくなった気がする❄️

##参考
React Router v6がリリースされたので端的にまとめます