¿Cómo escondo ciertos componentes en ciertas páginas de mi aplicación? Específicamente, necesito ocultar la barra de navegación y el encabezado de la página de configuración.
en App.js configuré un enrutador:
<div> <Router> <Switch> <Header/> <- header and navbar are here <Navbar/> <Route exact path = "/" component= { Data } /> <Route path = "/available-data" component= { Data } /> <Route path = "/devices" component= { Devices } /> <Route path = "/contacts" /> <Route path = "/chat" /> <Route path = "/settings" component = { Settings } /> <- i need to remove them from here </Switch> </Router> </div>El encabezado y la barra de navegación se utilizan en todos los componentes, excepto en Configuración. ¿Cómo hago para eliminarlos/ocultarlos?
Los tres archivos son componentes de función con ganchos useState (si es que tienen estado) si importa :)
Puede representar un segundo componente de conmutador para enrutar solo a páginas con el encabezado y la interfaz de usuario de la barra de navegación.
// in App.js <div> <Router> <Switch> <Route exact path="/settings" component={Settings} /> <Route path='/' ><UiRouter /></Route> </Switch> </Router> </div> // in UiRouter.js export default function UiRouter() { return ( <> <Header /> <Navbar /> <Switch> <Route exact path="/" component={Data} /> <Route path="/available-data" component={Data} /> <Route path="/devices" component={Devices} /> <Route path="/contacts" component={Contacts}/> <Route path="/chat" component={Chat}/> </Switch> </> ); }Además, como mencionó Ajith, no debe tener los componentes que desea representar para cada ruta (encabezado y barra de navegación) dentro del componente Switch.