【react】‘ Switch ‘不从‘ react-router-dom ‘导出问题解决方法

今天我配置react-router时出现了以下错误

' Switch '不是从' react-router-dom '在reactjs导出。

所以我列举一下所有可能的解决办法。

不浪费你的时间，让我们开始这篇文章解决这个错误。

目录

' Switch '不导出' react-router-dom '错误是如何发生的?

如何解决' Switch '不导出' react-router-dom '错误?

方法1：使用Routes代替Switch

方法2：版本回退，安装Switch

---

' Switch '不导出' react-router-dom '错误是如何发生的?

我出现了以下错误。

'Switch' is not exported from 'react-router-dom'

如何解决' Switch '不导出' react-router-dom '错误?

       你可以使用Switch。Switch在react-router-dom版本6中被替换。所以你需要安装react-router-dom版本5。现在，你的错误应该被解决了。

方法1：使用Routes代替Switch

import {
  BrowserRouter,
  Routes, // 使用Routes 而不是"Switch"
  Route,
} from "react-router-dom";

然后你可以这样使用

//之前
<BrowserRouter>
      <Switch>
      //注意看这里的区别
        <Route exact path="/" component={Home}>
        //注意看这里的区别
          <Home/>
        </Route>
      </Switch>
</BrowserRouter>


//之后
<BrowserRouter>
      <Routes>
      //这里将Switch转为Routes
        <Route exact path="/" element={<Home />}>
        //注意这里的component修改为element，而且组件调用使用的是标签<>，而不是模块；
          <Home/>
        </Route>
      </Routes>
</BrowserRouter>

方法2：版本回退，安装Switch

在这里只安装Switch。然后你可以使用Switch。Switch在react-router-dom版本6中被替换。所以你需要安装react-router-dom版本5。

npm install react-router-dom@5.2.0

都是关于这个问题。希望所有的解决方案对你有很大帮助。请在下方评论你的想法和疑问。另外，请在下方评论哪一种解决方案适合你?谢谢你！