how to get two kinds of components structure in single react app-CodePudding

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

CodePudding user response：

you can put elements with conditions like that

{isAdmin? <AdminNavbar> : <NormalNavbar> }

in the navbar component view different menu