Adding React Router returns me a blank web page not working

Question

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.

Answer 1

From what I can tell it seems you are using react-router-dom@6 and for some reason included the v5 Switch component. The Switch component was spiritually replaced by the Routes component and isn't part of the v6 API and should be removed.

import { BrowserRouter, Route, Routes } 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/>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/user" element={<User />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>  
  );
}