I'm trying to upgrade to react-router-dom v6 :

v5

In version 5 it works like a charm:

App.js

import Sidebar from "./components/sidebar/Sidebar";

import Topbar from "./components/topbar/Topbar";

import "./app.css";

import Home from "./pages/home/Home";

import {

  BrowserRouter as Router,

  Switch,

  Route,

} from "react-router-dom";

import UserList from "./pages/userList/UserList";

import User from "./pages/user/User";

import NewUser from "./pages/newUser/NewUser";

import ProductList from "./pages/productList/ProductList";

import Product from "./pages/product/Product";

import NewProduct from "./pages/newProduct/NewProduct";

import Login from "./pages/login/Login";







function App() {



   const admin = JSON.parse(JSON.parse(localStorage.getItem("persist:root"))?.user || "{}")?.currentUser?.isAdmin ;



  return (

    <Router>

    <Switch>

      <Route path="/login">

        <Login />

      </Route>

      {admin && (

        <>

          <Topbar />

          <div className="container">

            <Sidebar />

            <Route exact path="/">

              <Home />

            </Route>

            <Route path="/users">

              <UserList />

            </Route>

            <Route path="/user/:userId">

              <User />

            </Route>

            <Route path="/newUser">

              <NewUser />

            </Route>

            <Route path="/products">

              <ProductList />

            </Route>

            <Route path="/product/:productId">

              <Product />

            </Route>

            <Route path="/newproduct">

              <NewProduct />

            </Route>

          </div>

        </>

      )}

    </Switch>

  </Router>

  );

}



export default App;

v6

When upgraded to v6 I changed my code to be like this:

<Routes>

  <Route path="/login" element={<Login />} />

  {admin && (

    <>

      <Route path="/" element={<Topbar />}/>

      <Route path="/" element={

        <>

          <div className="container">

            <Route index element={<Sidebar/>}/>

            <Route index element={<Home/>}/>

            <Route path="/users" element={<UserList />} />

            <Route path="/user/:userId" element={<User />} />

            <Route path="/newUser" element={<NewUser />} />

            <Route path="/productList" element={<ProductList />} />

            <Route path="/product/:productId" element={<Product />} /> 

            <Route path="/newProduct" element={<NewProduct />} />

          </div>

        </> 

      }

    </>

  )}

</Routes>

This is my css file for App.js

Notice: the Topbar component should be outside the div, and react router didn't recognize the components inside the as routes even without div, that means each component should have a unique path, I tried also two components with the same path like this:

<Route path="/" element = {<><Home/><Sidebar/><>}, but the css is not taking effect

.container {

  display: flex;

  margin-top: 50px;

}

It doesn't work. I tried different code and I searched a lot without finding any solution.