インポートエラーの試行: 'Switch' は 'react-router-dom' からエクスポートされていません 質問する

インポートエラーの試行: 'Switch' は 'react-router-dom' からエクスポートされていません 質問する

なぜこのエラーが発生するのかわかりません。どこにも答えが見つかりません。パッケージをアンインストールし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 にアップグレード

おすすめ記事