在React路由器v6中，我们必须将组件替换为。 通过执行npm install react-router-dom@latest命令，确保你的项目运行的是最新版本。 如果你不想更新你的代码，你可以在你的项目根目录下运行npm install react-router-dom@5.2.0来安装react-router-dom的v5版本。

如果你有任何困惑，请观看这个视频寻求帮助:https://www.youtube.com/watch?v=8BVMPyQA7d4

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

卸载NPM react-router-dom NPM安装react-router-dom@5.2.0

一个解决方案:

删除“node_modules”文件夹。在包装里。Json文件，更改react-router-dom版本(在我的情况下版本6)为“react-router-dom”:“^5.2.1”

然后在终端运行:

NPM install用于安装依赖项，然后运行 NPM开始重新启动

在react-router-dom v6中，开关被路由替换。下面是配置react-router-dom v6的简单示例。

import * as React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Layout from './components/Layout';
import ProtectedRoute from './components/ProtectedRoute';
import LoginPage from './pages/LoginPage';
import WizardPage from './pages/WizardPage';
import RequestsPage from './pages/RequestsPage';

import './App.scss'

export class App extends React.Component {
    public render() {
        const sharedRouteProps = { exact: true, authenticationPath: '/login' };
        const wizardRouteProps = { ...sharedRouteProps, path: "/", component: WizardPage };
        const requestsRouteProps = { ...sharedRouteProps, path: "/requests", component: RequestsPage };

        return (
            <Layout>
              <Router>
                <Switch>
                    <Route exact path='/login' component={LoginPage} />
                    <ProtectedRoute {...wizardRouteProps} />
                    <ProtectedRoute {...requestsRouteProps} />
                </Switch>
              </Router>
            </Layout>
        );
    }
}

你必须先检查npm包的版本。 执行npm info react-router-dom version命令查看。

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

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

to

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

也必须改变

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

to

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

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