When I return only <NavBar> in the App.jsx file, it prints me out what I want (Navigation bar on the left side with my icons menu) but when I use the Router/Switch modules, the web page is blank any ideas why it is not working ?

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>    
   
  );
}

Here is the About page :

import React from 'react'

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

And here the picture of what i get :

The text is printed just under the NavBar and not newt to the NavBar right side.