I have developed two different navbar components for separate subsystems within our project.
App.js
function App() {
return (
<>
<Router>
<Routes>
<Route path="/" element={<CirclePage />} />
<Route
path = "*"
element={
<>
<Navbar/>
<Routes>
<Route path="/homepage" element={<Homepage />} />
<Route path="/events" element={<Events />} />
<Route path="/clubs" element={<Clubs />} />
<Route path="/notifications" element={<Notifications />} />
<Route path="/profile" element={<Profile />} />
<Route path="/contact" element={<Contact/>}/>
</Routes>
</>
}
/>
<Route
path = "*"
element={
<>
<NavbarClub/>
<Routes>
<Route path="/homepage-club" element={<HomepageClubs />} />
<Route path="/events-club" element={<EventManagement />} />
<Route path="/contact-clubs" element={<ContactClubs />} />
<Route path="/notifications-club" element={<NotificationsClub />} />
<Route path="/profile-club" element={<ClubProfile />} />
</Routes>
</>
}
/>
</Routes>
</Router>
</>
);
}
export default App;
The Navbar is set to appear on all screens except the main screen CirclePage. It should be visible on pages like homepage, events, clubs, notifications, profile and contact, while NavbarClub should only appear on pages with -club suffix. How can I achieve this setup?