Javascript React Router 从不直接渲染

在我的Reaction应用程序中，路由不起作用，并在控制台中抛出一个错误.在我的索引文件中

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

<React.StrictMode>
    <Router>
      <Route path="/" element={<App />} />
    </Router>
  </React.StrictMode>

在我的App.js中

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

function App() {
  return (
    <div className="App">
        {/* <DataProvder> */}
        <Sidebar />
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/students' element={<Students />} />
          <Route path='/schools' element={<Schools />} />
          <Route path='/campus' element={<Campus />} />
          <Route path='/placement' element={<Placement />} />
          <Route path='/courses' element={<Courses />} />
          <Route path='/staff' element={<Staff />} />
        </Routes>
        {/* </DataProvder> */}
    </div>
  );
}

export default App;

运行此命令时，不会显示任何内容，但在控制台中会抛出以下错误:

Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

我到底做错了什么？