第一步:升级到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';

第三步:升级语法，把“Switch”换成“Routes”，把“component”换成“element”

改变

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

to

<Routes>
    <Route path="/home" element={<HomePage/>} />
</Routes>

或者，您也可以按照其他解决方案中的建议降低react-router版本。

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

export 'Switch'(作为'Switch'导入)在'react-router-dom'中找不到

第一种方法[用路由替换交换机]

import { Routes , Route , Link } from 'react-router-dom';
<Routes>
 <Route exact path='/'>
  <HomePage />
 </Route>
</Routes>

第二种方法[将react-router-dom版本降级至版本5或以下]

npm i react-router-dom@5.0.0

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

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

如果它大于1，那么你需要删除node-modules并使用npm install——save重新安装node-module。

写入<路由>而不是<交换机>。

在终端中运行:

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

这对我很有帮助。或检查文件包。在“react-dom”后面添加以下内容:“^17.0.2”，

 "react-router": "^6.0.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;

如果你正在使用react-router-dom v6，你必须改变Switch到Routes，如下面的例子所示:

而不是导入Switch， import {Switch，…} from 'react-router-dom';

进口航线 import{路由，…} from 'react-router-dom';

然后，不要使用component ={ComponentName}，而是使用element={<ComponentName/>}，如下所示:

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