Tengo un problema con el enrutador de reacción.

Así que estoy construyendo la navegación de un sitio web y cuando estoy haciendo las rutas, no aparece nada.

¿Me ayudarías por favor a ver qué estoy haciendo mal?

La página se queda en blanco. No aparece nada, incluso la raíz no ve la página de inicio. .................................................... .......................................... Página de inicio:

 import React from 'react'; import Navbar from '../allpages/navbar/Navbar'; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Contact from "../contact/Contact"; import About from "../about/About"; const Home = () => { return ( <> <Router> <Navbar /> <Routes> <Route path="/about" element={About} /> <Route path="/contact" element={Contact} /> <Route exact path="/" element={Home} /> </Routes> </Router> <h3>Home</h3> </> ) } export default Home

Barra de navegación:

 import React from 'react'; import { BrowserRouter as Link } from "react-router-dom"; const Navbar = () => { return ( <div> <nav> <ul> <li> <Link to="/home">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav> </div> ) } export default Navbar

aplicación principal:

 import './App.css'; import Home from './components/home/Home' function App() { return ( <> <Home /> </> ); } export default App;

contacto:

 import React from 'react'; const Contact = () => { return ( <div> <h3>Contact</h3> </div> ) } export default Contact

Sobre:

 import React from 'react'; const About = () => { return ( <div> <h1>About</h1> </div> ) } export default About