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

Posted 2023-02-16

技术标签:

【中文标题】尝试导入错误：“Switch”未从“react-router-dom”导出【英文标题】：Attempted import error: 'Switch' is not exported from 'react-router-dom' 【发布时间】：2020-11-17 07:20:29 【问题描述】：

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

【问题讨论】：

可能是来自服务工作者的缓存问题。尝试 ctrl+f5 或以隐身模式浏览你得到这个问题的解决方案了吗 【参考方案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='/welcome' element=<Home/> />

在 react-router-dom 中，你也不需要在 Route 声明中使用 exact。

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

【讨论】：

注意Home改成<Home/>，第一眼没注意。 @FrancislainyCampos 很高兴为您提供帮助。还要注意Routes 有exact，那个道具有点被删除了。他们应该更新他们的文档，因为这在任何地方都没有提到！哦耶，我喜欢那些只会让用户感到困惑的毫无意义的 API 更改......【参考方案2】：

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

【讨论】：

【参考方案3】：

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

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

npm uninstall react-router-dom

并安装了 react-router-dom 5.2.0 版

npm install react-router-dom@5.2.0

【讨论】：

【参考方案4】：

这是一个使用 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;

【讨论】：

在 Route 内精确抛出错误@jean 简单有效的解释，感谢它对我的帮助。【参考方案5】：

如果您使用的是 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>
  );

【讨论】：

【参考方案6】：

change from this 

import  BrowserRouter as Router, Switch, Route, Link  from "react-router-dom";


        <Switch>
              <Route path="/home" component=Home />
            </Switch>
            
            
          to   
            
import  BrowserRouter as Router, Routes, Route, Link  from "react-router-dom";


         <Routes>
              <Route path="/home" element= <Home /> />
            </Routes>

【讨论】：

【参考方案7】：

我通过更改我使用element 的方式来解决我的错误。

到：

import React from "react";
import  BrowserRouter as Router, Route, Routes  from "react-router-dom";
import  Home  from "./app";
import  Login, Register  from "./auth";
const R: React.FC = () => 
  return (
    <Router>
      <Routes>
        <Route path="/login" caseSensitive=false element=<Login /> />
        <Route path="/register" caseSensitive=false element=<Register /> />
        <Route path="/" caseSensitive=false element=<Home /> />
      </Routes>
    </Router>
  );
;
export default R;

基本上在v6.*之前：

import React from "react";
import  BrowserRouter as Router, Route, Switch from "react-router-dom";
import  Home  from "./app";
import  Login, Register  from "./auth";
const R: React.FC = () => 
  return (
    <Router>
      <Switch>
        <Route path="/login">
           <Login />
        </Route>
       <Route path="/register">
           <Register/>
        </Route>

       <Route path="/">
           <Home/>
        </Route>
      </Switch>
    </Router>
  );
;
export default R;

v6.*之后

import React from "react";
import  BrowserRouter as Router, Route, Routes  from "react-router-dom";
import  Home  from "./app";
import  Login, Register  from "./auth";
const R: React.FC = () => 
  return (
    <Router>
      <Routes>
        <Route path="/login" caseSensitive=false element=<Login /> />
        <Route path="/register" caseSensitive=false element=<Register /> />
        <Route path="/" caseSensitive=false element=<Home /> />
      </Routes>
    </Router>
  );
;
export default R;

【讨论】：

【参考方案8】：

你必须先检查 npm 包版本。要检查，请运行npm info react-router-dom version。

如果包版本>= 6.0.0，则必须更改

import  BrowserRouter as Router, Switch, Route, Link  from "react-router-dom";

到

import  BrowserRouter as Router,Routes, Route, Link  from "react-router-dom";

也必须改变

<Route path="/home" component=Home />

到

<Route path="/home" element=<Home/> />

【讨论】：

【参考方案9】：

如果您使用的是react-router-dom v6，则必须按照以下示例将 Switch 更改为 Routes：

而不是导入 Switch， import Switch, ... from 'react-router-dom';

导入路线 import Routes, ... from 'react-router-dom';

那么，就不用component = ComponentName, use element=<ComponentName/>了，如下图：

import  Routes, Route, ... from 'react-router-dom';
    .
    .
    .  
    <Routes>
      <Route exact path='/' element=<Home/>></Route>
    </Routes>

【讨论】：

【参考方案10】：

Switch has been replaced by Routes

来源更新路由（react-router-dom 语法）#1386（howtographql github）

【讨论】：

【参考方案11】：

如果您使用的是 react-router-dom 版本 6，则需要将 Switch 更新为 Routes。以下语法对我有用：

import  BrowserRouter as Router, Route, Routes  from "react-router-dom";
import './App.css';
import Home from './components/Home';

function App() 
  return (
    <div>
      <Router>
        <Routes>
          <Route path="/" exact element=<Home /> />
        </Routes>
      </Router>
    </div>
  );


export default App;

【讨论】：

【参考方案12】：

react-router-dom 已更新到版本 6 。现在他们已将 <Switch/> 组件重命名为 <Routes/> 。

【讨论】：

【参考方案13】：

你的 react-router-dom 版本是多少？

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

如果高于一个，那么您需要删除节点模块并使用 npm install --save 重新安装节点模块

【讨论】：

【参考方案14】：

写<Routes>而不是<Switch>

在终端上运行：

npm install --save react-router react-router-dom

这对我有帮助，或者检查 package.json 在"react-dom": "^17.0.2", 之后添加以下内容：

 "react-router": "^6.0.0",

【讨论】：

【参考方案15】：

Switch 是从 react-router 而不是 react-router-dom 导出的（我认为 Route 也是如此）。

【讨论】：

React Router Dom 有自己的组件和 API reactrouter.com/web/guides/quick-start - 这是一个 github issue 来详细说明“差异”github.com/ReactTraining/react-router/issues/4648 @kJs0 你是对的，我忘记了react-router-dom 重新导出了来自react-router 的所有内容。这实际上修复了我的错误，我安装了 react-router 包并通过 react-router 导入它，但现在我收到另一个错误，指出“错误：不变式失败：您不应该使用在之外”，当我的交换机肯定在路由器内部时？大声笑确保两个版本完全相同react-router & react-router-dom【参考方案16】：

<Switch> 替换为<Routes>

之前：

import  Route, Switch from 'react-router'

<Router>
     <Switch>
           <Route />
           <Route />
     </Switch>
</Router>

现在：

import  Route, Routes from 'react-router'

 

    <Router>
              <Routes>
                     <Route />
                     <Route />
              </Routes>
     </Router>

只需使用 Routes 而不是 Switch

【讨论】：

【参考方案17】：

解决方案：

删除 node_modules 文件夹。在 package.json 文件中，将 react-router-dom 版本（在我的情况下为版本 6）更改为 "react-router-dom": "^5.2.1"

然后在终端运行：

npm install 安装依赖然后运行 npm start重启

【讨论】：

【参考方案18】：

我这样解决了问题：

yarn add react-router-dom@5,3,0

【讨论】：

【参考方案19】：

import 
      BrowserRouter as Router,
      Routes,
      Route,
      Link
     from "react-router-dom";
    
    function App() 
      return (
        <>
        <Router className="App">
          <Navbar/>
          <Routes>
            <Route path='/'>
    
            </Route>
          </Routes>
        </Router>
        </>
      );
    
    
    export default App;

【讨论】：

【参考方案20】：

安装 react-router-dom v6.0.2 后出现此错误。

用 Routes 替换 Switch 解决了这个问题：

import BrowserRouter as Router, Route, Routes from "react-router-dom";

【讨论】：

【参考方案21】：

语法已更改

旧语法

import  BrowserRouter as Router, Switch, Route, Link  from "react-router-dom";


        <Switch>
              <Route path="/home" component=Home />
            </Switch>

新语法：

import  BrowserRouter as Router, Routes, Route, Link  from "react-router-dom";


         <Routes>
              <Route path="/home" element=<Home/> />
            </Routes>

【讨论】：

【参考方案22】：

这实际上对您或 react 或您的代码都不是问题。就是 react-router-dom 的更新版本，用 Routes 替换 Switch 就可以了，用 Routes 代替 Switch 就可以了。

【讨论】：

【参考方案23】：

我有同样的问题。在项目终端上，键入以下命令。您无需对代码进行任何更改。

npm uninstall react-router-dom

npm install react-router-dom@5.2.0

注意：如果有帮助，将不胜感激。

【讨论】：

【参考方案24】：

如果您安装 react-router 和 react-router-dom v6 beta，只需像这样卸载：

npm uninstall --save react-router react-router-dom

然后用这个安装它：

npm install --save react-router react-router-dom

它将安装非测试版的最新版本。

然后我们只需要重新启动 Vscode 或您使用的任何文本编辑器。

【讨论】：

【参考方案25】：

我遇到了同样的问题，我删除了react-router-dom，然后重新安装了它。

出现问题是因为我已将其升级到最新版本，即 react-router-dom v6，然后想降级到以前的版本，即 v5

我在 Rails 项目中使用 yarn 管理依赖关系，您可以使用此命令删除并重新安装它：

yarn remove react-router-dom

yarn add react-router-dom

这应该可以解决问题。

【讨论】：

【参考方案26】：

团队，我面临与问题海报相同的问题。我尝试了以下所有方法

卸载并安装 react-router-dom 从 react-router-dom 单独导入 Switch

但没有什么对我真正有用。

请按照以下说明进行操作，我相信您不会再次收到错误消息。

正确的代码：

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, Routes, Route, Link  from "react-router-dom";

function App() 
  return (
    <Router>
      <div className="app-container">
        <NavBar />
        <Routes>
          <Route path="/home" element=<Home/> />
        </Routes>
        <Footer />
      </div>
    </Router>
  );


export default App;

注意* Switch 已经被替换为 Routes 并且使用组件，我们需要使用元素

【讨论】：

【参考方案27】：

我也遇到了这个问题，终于解决了，通过整理代码，我是reactjs的新手

以下是我的 App.js 代码（类基础组件）

import logo from './logo.svg';
import './App.css';

import React,  Component  from 'react'
import PropTypes from 'prop-types'
import Navbar from './components/Navbar';
import News from './components/News';
import  BrowserRouter as Router, Route, Routes,Link  from 'react-router-dom'

export class App extends Component 
  static propTypes = 

  

  render() 
    return (  
      <>  
        <Navbar/>
        <Router>
          <Routes>
            <Route path="/general"><News pageSize=3 country='us' category='general'/></Route>
          </Routes>
        </Router>
      </>
    )
  


export default App

【讨论】：

以上是关于尝试导入错误：“Switch”未从“react-router-dom”导出的主要内容，如果未能解决你的问题，请参考以下文章

./src/App.js 尝试导入错误：“Switch”未从“react-router-dom”导出

尝试导入错误：“initializeApp”未从“firebase”导出（导入为“firebase”）[关闭]

为啥我会收到“尝试导入错误：'EffectCards' 未从 'swiper' 导出”？

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

尝试导入错误：“createGlobalStyle”未从“样式组件”导出

尝试导入错误：“app”未从“firebase/app”导出（导入为“firebase”）