Tengo 3 páginas en mi aplicación React junto con las siguientes rutas:
Me gustaría que las páginas Panel y Proyecto tuvieran un encabezado, pero la página de inicio de sesión no debería tener ningún encabezado.
Actualmente las rutas se ven así:
<Router> <Route path="/" component={Login}> <Route path="/dashboard" component={Dashboard} /> <Route path="/projects" component={Projects} /> </Router> Creé un componente llamado Shell que proporciona solo el encabezado. ¿Cómo configuro mi enrutador para que Shell sea el componente principal para Dashboard and Projects pero no para la página de inicio de Login ?
Editar 1
Me pregunto si es posible usar un padre sin ruta como este para representar el Shell alrededor de los componentes secundarios:
<Router> <Route path="/" component={Login}> <Route component={Shell}> <Route path="/dashboard" component={Dashboard} /> <Route path="/projects" component={Projects} /> </Route> </Router>Editar 2
¡Acabo de probar el cambio anterior y funciona! Leyendo los documentos, la path no es un accesorio requerido. Entonces, en el código anterior, <Route component={Shell}> es perfectamente legítimo.
Lo que tienes en Edit 1 es correcto.
<Router> <Route component={Login}> <Route component={Shell}> <Route path="/dashboard" component={Dashboard} /> <Route path="/projects" component={Projects} /> </Route> </Router> Y en su componente <Shell> , puede hacer:
import Header from './Header'; ... render() { return ( <div id="shell"> <Header /> {this.props.children} </div> ); } ...