尝试导入错误：“Switch”未从“react-router-dom”导出

IT技术 reactjs
2021-03-30 22:45:32

我不知道为什么我会收到这个错误，而且我在任何地方都找不到答案。我已经卸载了该react-router-dom包并重新安装了它，但它仍然告诉我没有从 react-router-dom 导出 switch module。这是我的代码。

我得到的错误：尝试导入错误：“开关”未从“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;
`
6个回答

在 react-router-dom v6 中，“Switch”被路由“Routes”取代。您需要更新从

import { Switch, Route } from "react-router-dom";

到

import { Routes ,Route } from 'react-router-dom';

您还需要更新 Route 声明

<Route path="/" component={Home} />

到

<Route path='/welcome' element={<Home/>} />

在 react-router-dom 中，您也不需要在 Route 声明中使用精确。

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

注意更改Home到<Home/>，我没有先看看注意到它。
2021-05-31 22:45:32
还要注意Routes exact，那个道具被移除了。
2021-06-08 22:45:32
哦，是的，我喜欢毫无意义的 api 更改，它们只会让用户感到困惑....
2021-06-15 22:45:32
他们应该更新他们的文档，因为这在任何地方都没有提到！！
2021-06-16 22:45:32
@FrancislainyCampos 很高兴为您提供帮助。
2021-06-17 22:45:32

如果您使用的是react-router-domv6，它看起来Switch已被替换为Routes

我也遇到了同样的问题，我在互联网上搜索了很多，但根据我的问题没有得到任何答案。

所以我卸载了 react-router-dom 的第 6 版

npm uninstall react-router-dom

并安装了 react-router-dom 的 5.2.0 版本

npm install react-router-dom@5.2.0

这是一个使用 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;
简单有效的解释，谢谢它帮助了我。
2021-05-25 22:45:32
在 Route 内精确抛出错误@jean
2021-06-03 22:45:32

如果您使用的是 react-router-dom 的第 6 版，请使用此

另外，请参阅此处以供参考：https : //reactrouter.com/docs/en/v6/upgrading/v5# :~: text=single%20route%20config%3A-,//%20This%20is%20a%20React %20Router%20v6%20app,%7D,-This%20step%20is

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="me" element={<OwnUserProfile />} />
          <Route path=":id" element={<UserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  );
}
其它你可能感兴趣的问题
上一篇在typescript中一直使用 .tsx 而不是 .ts 有什么缺点吗？ 下一篇不变违规：在“Connect(SportsDatabase)”的上下文或props中找不到“商店”