尝试导入错误:“交换机”未从“react-router-dom”中导出

Question

我不知道为什么我会犯这个错误，我在任何地方都找不到答案。我已经卸载了＜code＞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;

Answer 1

这是一个使用react-router-dom V6的示例

import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

import '../styles/global.css'

import Layout from '../containers/Layout'
import Home from '../pages/Home'
import Login from '../containers/Login'
import RecoveryPassword from '../containers/RecoveryPassword'
import NotFound from '../pages/NotFound'

const App = () => {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route exact path="/login" element={<Login/>}/>
          <Route exact path="/recovery-password" element={<RecoveryPassword/>}/>
          <Route path="*" element={<NotFound/>}/>
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;

Answer 2

如果您使用的是react-router-domv6，那么Switch似乎已被Routes替换。

Answer 3

在react router dom v6中，“交换机”替换为路由“路由”。您需要从更新导入

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 中，您也不需要在 Route 声明中使用 exact。

有关更多信息，您可以访问官方文档：升级到react router dom v6