Can I use multiple Browser Router for multiple dashboards

Question

This is the structure I'm using now

App.js

import Home from './Home/Home'
import './App.css'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import Services from './Home/Components/Services'
import Admin from './Admin/Screens/Admin'
import Signin from './Admin/Screens/Asignin'
import AProfile from './Admin/Components/Profile'
import AUnverified from './Admin/Components/Unverified'
import AVerified from './Admin/Components/Verified'

function App() {

  return (
    <BrowserRouter>
        <Routes>
          <Route path = "/" element={<Home />} />,
          <Route path = "/services" element={<Services />} />,
          <Route path = "/about" element={<Home />} />,
          <Route path = "/admin" element={<Admin />} />,
          <Route path = "/admin/signin" element={<Signin/>} />,
          <Route path = "/admin/verified" element={<AVerified/>} />,
          <Route path = "/admin/unverified" element={<AUnverified/>} />,
          <Route path = "/admin/profile" element={<AProfile/>} />,
          <Route path = "/consumer" element={<Home />} />,
          <Route path = "/professional" element={<Home />} />,
          <Route path = "*" element={<h1>Page Not Found</h1>} />,
        </Routes>
      </BrowserRouter>
  )
}

export default App

Sidebar.js

import React from 'react'
import { Sidebar,Menu,MenuItem,useProSidebar,} from 'react-pro-sidebar'
import { Link } from 'react-router-dom'
import DehazeIcon from '@mui/icons-material/Dehaze';
import PersonPinIcon from '@mui/icons-material/PersonPin';
import VerifiedIcon from '@mui/icons-material/Verified';
import GppMaybeIcon from '@mui/icons-material/GppMaybe';


function Sidenav() {

  const { collapseSidebar } = useProSidebar();

  return (
    <div>
      <Sidebar>
          <Menu>

              <MenuItem 
                icon={<DehazeIcon/>}
                onClick={()=>{
                  collapseSidebar()
                }}
                >
                  <h2>Advisely</h2>
              </MenuItem>
              
              <MenuItem component={<Link to ="/admin/unverified" />} icon={<GppMaybeIcon/>}>Unerified</MenuItem>
              <MenuItem component={<Link to ="/admin/verified" />} icon={<VerifiedIcon/>}>Verified</MenuItem>
              <MenuItem component={<Link to ="/admin/profile" />} icon={<PersonPinIcon/>}>Profile</MenuItem>
          </Menu>
      </Sidebar>
    </div>
  )
}

export default Sidenav

Admin -> components

import React from 'react'
import Sidenav from './Sidenav'

function Profile() {
  return (
    <div style={{display:'flex'}}>
      <Sidenav />
      Profile
    </div>
  )
}

export default Profile
Profile

Here I have to load Sidenav at every single subcomponent of admin, how can I avoid these and render all the subcomponents of admin into the admin page only.

I tried theses but wont work

// Consider these as a new App.jsx

import React from 'react'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import Profile from '../Components/Profile';
import Sidenav from '../Components/Sidenav';
import Unverified from '../Components/Unverified';
import Verified from '../Components/Verified';
import '../Styles/Admin.css'

function Admin() {

  return (
    <div>
      <BrowserRouter>
        <Sidenav/>
        <Routes>
          <Route path = "/" element={<Unverified />} />,
          <Route path = "/verified" element={<Verified/>} />,
          <Route path = "/profile" element={<Profile/>} />,
          <Route path = "*" element={<h1>Page Not Found</h1>} />,
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default Admin

I want to make the browser routes for different to solve problem of loading sidebar again and again

Answer 1

You cannot nest routers in react-router-dom@6.

If you want to share common UI then either continue to render Admin on the root "/admin/*" route and render descendent routes. Note here the root path appends a trailing wildcard matcher so descendent routes can be matched and rendered.

App

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/services" element={<Services />} />
        <Route path="/about" element={<Home />} />
        <Route path="/admin/*" element={<Admin />} />
        <Route path="/consumer" element={<Home />} />
        <Route path="/professional" element={<Home />} />
        <Route path="*" element={<h1>Page Not Found</h1>} />
      </Routes>
    </BrowserRouter>
  );
}

Admin

function Admin() {
  return (
    <div>
      <Sidenav />
      <Routes>
        <Route path="/signin" element={<Signin />} />
        <Route path="/unverified" element={<Unverified />} />
        <Route path="/verified" element={<Verified />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="*" element={<h1>Page Not Found</h1>} />
      </Routes>
    </div>
  );
}

Or you can convert Admin into a layout route component where it renders an Outlet component for nested routes to render their content into.

App

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/services" element={<Services />} />
        <Route path="/about" element={<Home />} />
        <Route path="/admin" element={<Admin />}>
          <Route path="signin" element={<Signin />} />
          <Route path="unverified" element={<Unverified />} />
          <Route path="verified" element={<Verified />} />
          <Route path="profile" element={<Profile />} />
        </Route>
        <Route path="/consumer" element={<Home />} />
        <Route path="/professional" element={<Home />} />
        <Route path="*" element={<h1>Page Not Found</h1>} />
      </Routes>
    </BrowserRouter>
  );
}

Admin

function Admin() {
  return (
    <div>
      <Sidenav />
      <Outlet />
    </div>
  );
}