0
84
ViewsCómo usar diferentes tipos de componentes de la barra de navegación en diferentes páginas
Tengo dos componentes de barra de navegación diferentes creados para dos subsistemas diferentes de nuestro proyecto.
Aplicación.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;La barra de navegación está visible en todas las pantallas excepto en la pantalla principal CirclePage. Quiero que Navbar sea visible en la página de inicio, eventos, clubes, notificaciones, perfil y contacto, mientras que NavbarClub sea visible en las páginas de -club. ¿Cómo puedo implementar esto?
·
Juan Pablo Isaza
1 answers
Answer question0
Cree componentes de envoltura de diseño para cada uno que represente la barra de navegación específica y un Outlet para los componentes de Route anidados.
Ejemplo:
import { Outlet } from 'react-router-dom'; const NavbarLayout = () => ( <> <Navbar /> <Outlet /> </> ); const NavbarClubLayout = () => ( <> <NavbarClub /> <Outlet /> </> );aplicación
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
Report
Answer question