Cuando devuelvo solo <NavBar> en el archivo App.jsx, me imprime lo que quiero (barra de navegación en el lado izquierdo con mi menú de íconos) pero cuando uso los módulos Router/Switch, la página web está en blanco. ¿por qué no está funcionando?

 import { BrowserRouter, Route, Routes, Switch } from 'react-router-dom' import NotFound from './Pages/Errors/NotFound'; import NavBar from './Components/NavBar'; import Dashboard from './Pages/Dashboard/Dashboard'; import User from './Pages/User/User'; import About from './Pages/About/About'; export default function App() { return ( <BrowserRouter> <NavBar/> <Switch> <Routes> <Route exact path="/" element={<Dashboard />} /> <Route path = "/user" element={<User />} /> <Route path = "/about" element={<About />} /> </Routes> </Switch> </BrowserRouter> ); }

Aquí está la página Acerca de:

 import React from 'react' export default function About () { return ( <div> <h2 className="text-2xl">About</h2> <h1> How you can contact us? </h1> </div> ) }

Y aquí la imagen de lo que obtengo:

El texto se imprime justo debajo de la barra de navegación y no aparece en el lado derecho de la barra de navegación.