react-router-dom包最近发生了突破性的变化。React Router v6 Changelog永久链接

所以你所需要的就是重命名导入，就像这样…

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

干杯!

我解决了我的错误，通过改变我渲染我的路线使用元素的方式。

To:

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;

如果你正在使用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>
  );
}

改变

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>

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

我也面临着这个问题，并最终通过安排代码解决了它。我是React的新手。

以下是我的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