0
85
VistasHow to use different kinds of navbar components on different pages
I have two different navbar components created for two different subsystems of 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;
Navbar is visible on every screen except the main screen CirclePage. I want Navbar to be visible on homepage, events, clubs, notifications, profile and contact while NavbarClub to be visible in with the -club pages. How can I implement this?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Create layout wrapper components for each that renders the specific navbar and an Outlet for nested Route components.
Example:
import { Outlet } from 'react-router-dom';
const NavbarLayout = () => (
<>
<Navbar />
<Outlet />
</>
);
const NavbarClubLayout = () => (
<>
<NavbarClub />
<Outlet />
</>
);
App
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<CirclePage />} />
<Route path="*" element={<NavbarLayout />}>
<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 />} />
</Route>
<Route path="*" element={<NavbarClubLayout />}>
<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 />} />
</Route>
</Routes>
</Router>
);
}
·
Juan Pablo Isaza
Denunciar
Responde la pregunta