我正在做一个课程，其中使用了 react-router-dom 的第 5 版，其中 react-router-dom 发生了一些相当重大的变化。

当启动应用程序时，浏览器中出现一个白页，使用 devtools 我收到一条错误消息： 未捕获的错误： <Route> 只能用作 <Routes> 元素的子元素，从不直接呈现。请将您的 Route 包装在 Routes 中。

在我决定写这篇文章之前，我浏览了各种论坛，了解如何解决此错误，主要有两种解决方案：

1. 将 react-router-dom 的版本更改为旧版本（我不想使用此方法，我想解决问题）
2. 按照错误消息的建议将 Route 包装在 Routes 中。这就是我所做的。但它没有用。

App.js

import "./App.css";
import Dashboard from "./components/Dashboard";
import Header from "./components/Layout/Header";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Routes, Router, Route } from "react-router-dom";
import AddProject from "./components/Project/AddProject";
import { Component } from "react";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Header />
          <Routes>
            <Route exact path="/dashboard" component={Dashboard} />
            <Route exact path="/addProject" component={AddProject} />
          </Routes>
        </div>
      </Router>
    );
  }
}

export default App;

我更改了导入，在其中添加了 Routes 。我将 Route 包装在 Routes 中。但它总是得到同样的错误。

我不知道是否应该删除 Router ，但如果我这样做，它会收到错误： Uncaught TypeError: 无法读取未定义的属性（读取“路径名”）