ReactJS routing problem (blank screen render)

Question

src/index.js :

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

import './index.css';

import TableauBord from './pages/TableauBord';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <Router>
    <Routes>
      <Route path="/" component={TableauBord} />
    </Routes>
  </Router>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: 
reportWebVitals();

src/pages/TableauBord.jsx :

import React from 'react';

const TableauBord = (props) => {
    return <h2>TableauBord</h2>;
}

export default TableauBord;

Hi guys, i'm actually facing a problem where i'm not able to find any solutions. I've started a new project in ReactJS 2 days ago (i'm also new to React) and tried to use 'react-router-dom'. I've followed many tutorials and can't make my routing work. I also tried to put my Router in App.js but my components are never rendered and only blank screen is returned.

I just tried to reproduce my project on an Ubuntu 20 VM (it's why index.js contains only 1 route at "/" -> TableauBord.jsx) because I got many npm warn on windows 10 caused by dependencies i can't fix with "audit fix --force". Before trying routing I used to put directly my components in App.js and it worked for a Navbar, and a mobile/desktop homepage (using device detection) but through routing nothing is working.

I asked myself if using jsx need any babel setup but every tutorials I've seen only create the project, install react-router-dom and produce a functional routing system.

Thanks for your help :)

PS : sorry if my english seems a bit weird, I'm not en native

If you want to see how i tried on my windows 10 project :

src/App.js :

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
/*
import GlobalNavbar from "./composants/GlobalNavbar.js";
import MobileTB from "./composants/MobileTB.js";
import DesktopTB from "./composants/DesktopTB.js";
import { isMobile, BrowserView } from "react-device-detect";
*/
import TableauDeBord from "./pages/TableauBord";
import Geolocalisation from "./pages/Geolocalisation";
import Agenda from "./pages/Agenda";
import RapportActivite from "./pages/RapportActivite";
import Campagne from "./pages/Campagne";
import Newsletter from "./pages/Newsletter";

const App = () => {
  return (
    <BrowserRouter>
      <div className="container-fluid">
        <Routes>
          <Route path="/" component={TableauDeBord} />
          <Route path="/geolocalisation" component={Geolocalisation} />
          <Route path="/agenda" component={Agenda} />
          <Route path="/rapportActivite" component={RapportActivite} />
          <Route path="/campagne" component={Campagne} />
          <Route path="/newsletter" component={Newsletter} />
        </Routes>
      </div>
    </BrowserRouter>

    /*
    <div>
      <BrowserView>
        <GlobalNavbar />
      </BrowserView>
      
      {isMobile ? <MobileTB /> : <DesktopTB />}
    </div>
    */
  );
}

export default App;

^ the commented code works when routing one not (all pages follow same scheme as TableauBord.jsx only a return h2 PageName).