Javascript 错误：将您的 Route 组件包装在 Routes 组件中(在 reactrouterdom 版本 5 和 6 之间更改)

我正在做一个课程，在那里使用了react-router-dom的第5版，对react-router-dom做了一些非常重要的更改.

启动应用程序时，浏览器中会出现一个白色页面，使用devtools我会收到一条错误消息:Uncaught Error: A 100 is only ever to be used as the child of 101 element, never rendered directly. Please wrap your Route in a Routes.

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

1. 将react-router-dom的版本更改为旧版本(我不想使用这种方法，我想解决这个问题)
2. 正如错误消息所建议的那样，将Route封装在Routes中.这就是我所做的.但它不起作用.

应用程序.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: Cannot read properties of undefined (reading 'pathname')