なぜこのエラーが発生するのかわかりません。どこにも答えが見つかりません。パッケージをアンインストールしreact-router-dom
て再インストールしましたが、スイッチ モジュールが react-router-dom からエクスポートされていないというメッセージが引き続き表示されます。これが私のコードです。
発生したエラー:
インポートの試行エラー: 「Switch」は「react-router-dom」からエクスポートされていません。
コード
import React from 'react';
import './App.css';
import NavBar from './components/navbar.js';
import Footer from './components/footer.js';
import Home from './components/pages/homepage/home.js';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<div className="app-container">
<NavBar />
<Switch>
<Route path="/home" component={Home} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;
ベストアンサー1
react-router-dom v6では、「Switch」はルート「Routes」に置き換えられました。インポートを更新する必要があります。
import { Switch, Route } from "react-router-dom";
に
import { Routes ,Route } from 'react-router-dom';
また、ルート宣言を次のように更新する必要があります。
<Route path="/" component={Home} />
に
<Route path='/' element={<Home/>} />
react-router-domでは、ルート宣言でexactを使用する必要もありません。
詳細については、公式ドキュメントをご覧ください。react-router-dom v6 にアップグレード