当我使用React路由器DOM V6显示空白页面时，没有ERREURS

Question

我正在使用react-router-dom v6在页面之间切换，并且它正在呈现一个空白页，当我删除react-router-dom我的页面显示我的页面上也没有显示navbar，navbar也没有显示出刻度 中添加三个React Router dom时，我的页面转换为空白页面

当在app.js index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import '../node_modules/font-awesome/css/font-awesome.min.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter } from 'react-router-dom';


ReactDOM.render(
  <BrowserRouter>
    <App />  
  </BrowserRouter> ,
  document.getElementById('root') 
);

： app.js：

import './App.css';
import Accueil from './Components/Accueil';
import Avantages from './Components/Avantages';
import Fonctionnalite from './Components/Fonctionnalite';
import Navbar from './Components/Navbar';
import { Routes , Route } from 'react-router-dom' ;

function App() {
  return (
    <div className="App">
      <Navbar/>
        <Routes>
          <Route path="/" element={<Accueil/>} />
          <Route path="fonctionnalite" element={<Fonctionnalite/>} />
          <Route path="/avantages" element={<Avantages/>} />
        </Routes>
    </div>
  );
}

export default App