i have a react app in which i want that if user route start with admin it should have a different navbar
lets take example
normal page
<NormalNavbar/>
<NormalHeader/>
<NormalBody/>
<NormalFooter/>
But if i have the admin route then i want to have
<AdminNavbar/>
<AdminHeader/>
<AdminBody/>
<AdminFooter/>
The issue is when we wind it inside the Routes then we decide the normal components which are loading i will paste the example below
return (
<div className="App">
<>
<Navbar />
<Routes>
<Route exact path="/" element={<HomePage />} />
<Route exact path="/product/:id" element={<ProductPage />} />
<Route exact path="sarangAdmin/create-product" element={<CreateProduct />} />
<Route exact path="login" element={<Login />} />
<Route exact path="profile" element={<Profile />} />
<Route exact path="register" element={<Register />} />
</Routes>
<Footer />
</>
</div>
);
You can see my current navbar and footer going to be same
you can put elements with conditions like that
{isAdmin? <AdminNavbar> : <NormalNavbar> }
OR
in the navbar component view different menu
See the above answers is good but its not the optimal solution I wanted so I get the solution by looking other git repository here is the repository that shows how you should do it in a perfect way make route component structure and then you can render them conditionally which I wanted in my case the most optimum solution to my question