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

Question

我不知道为什么会收到此错误，并且在任何地方都找不到答案。我已经卸载了该react-router-dom软件包并重新安装了它，但它仍然告诉我交换机模块未从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中，“Switch”被路由“Routes”取代。您需要更新导入

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声明中使用精确的值。

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

Answer 2

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

Answer 3

这是使用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 4

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

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

npm uninstall react-router-dom

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

npm install react-router-dom@5.2.0

Answer 5

语法已更改

旧语法

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>

Answer 6

在react-router-dom v6中，Switch已被路由取代。使用这种格式：

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

<Router>
    <Routes>
        <Route exact path="/" element={<component />} />
        <Route exact path="/path2" element={<component2 />} />
        <Route exact path="/path3" element={<component3 />} />
    </Routes>
</Router>

Answer 7

如果您使用的是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,-这%20step%20是

// 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>
  );
}

Answer 8

我可以通过从交换机更改为路由来修复它。所以你应该有这样的东西：

<Routes>
  <Route path='/home' element={<Home/>} />
</Routes>

您还需要将导入从 Switch 更改为 Routes：

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

Answer 9

react-router-dom已更新至版本 6。现在他们已将该<Switch/>组件重命名为<Routes/>. 也有很多变化。

您应该花一些时间阅读文档。这是react-router-v6-doc的链接。

Answer 10

<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>

只需使用路由而不是交换机。

Answer 11

更改自

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>

Answer 12

步骤1：升级到React 16.8+和react-router-dom v5.2：

npm uninstall react-router-dom
npm install react-router-dom@5.2

第2步：更新react-router-dom导入语句。

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

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

步骤3：升级语法，将“Switch”替换为“Routes”，将“component”替换为“element”

改变

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

到

<Switch>
    <Route path="/home" component={HomePage} />
</Switch>

或者，您也可以按照其他解决方案中的建议降级反应路由器版本。

然而，我建议升级到最新版本的react-router-dom及其语法，而不是倒退。

Answer 13

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

Answer 14

我通过改变渲染路由的方式来解决我的错误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, 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;

Answer 15

在react-router-dom v6中，交换机被替换为路由。

和带有元素的组件

{组件名称} 与 {}

Answer 16

你的react-router-dom版本是什么？

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

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

Answer 17

写<Routes>代替<Switch>.

在终端中运行：

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

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

 "react-router": "^6.0.0",

Answer 18

您必须首先检查 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/>} />

Answer 19

如果您使用的是react-router-domv6，则必须将 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>

Answer 20

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

Answer 21

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

1. npm uninstall react-router-dom

2. npm install react-router-dom@5.2.0

Answer 22

交换机已被路由取代。

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

Answer 23

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;