react-routerとは
Reactアプリケーションでルーティング(ページ間の移動)を管理するためのライブラリです。
異なるURLに応じて表示するコンポーネントを切り替えることができる。
Switchとは
React Routerのコンポーネントの1つで、最初に一致したルートだけ をレンダリングする役割を持ちます。
なぜ "Switch" が使えなかったか
一言でいうと**バージョンの違い**です。
"Switch"はバージョン５までの機能で、バージョン６以降は"Routes"に置き換わっています。
npm install react-router-dom でインストールした人注意！
npm install react-router-dom
上記でインストールすると、"Switch"が使用できないバージョンでインストールされる。
解決策：バージョンを確認し、
５までは"Switch",６以降は"Routes"を使いましょう。
Routesの注意点
switchの場合は下記のように使用していたが、
<Switch>
<Route path="/" >
<Home/ >
</Route>
</Switch>
しかしRoutesでは下記のように使用する。
<Routes>
<Route path="/" element ={<Home/>}>
</Routes>
version6では、の中に配置できる要素はコンポーネントまたはだけです。
の子要素としてコンポーネントを直接渡すことはできません。代わりに、のelementプロパティにコンポーネントを指定する必要がある。