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

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

我不知道为什么我会收到这个错误，而且我在任何地方都找不到答案。我已经卸载了react-router-dom 包并重新安装了它，但它继续告诉我switch 模块不是从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 或以隐身模式浏览
你得到这个问题的解决方案了吗

标签： reactjs

【解决方案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

【讨论】：