Reaccionar enrutador con diferentes plantillas para diferentes rutas v. 5
Hola, he visto esta pregunta y esto es exactamente lo que estoy buscando, pero no puedo hacer que funcione. Enrutadores React Router V4 con páginas maestras / plantillas
Estoy usando la versión 5.2
El componente de la aplicación incluye la navegación y envuelve dos rutas con dos componentes de plantilla, 'Público' y 'Privado' y cuando hago clic en cada enlace, espero que la página esté envuelta por su plantilla, pero en cambio solo el primer enlace funciona y muestra la plantilla. El segundo enlace solo cambia la URL en la barra de direcciones del navegador y solo el contenido de la primera plantilla permanece en la página y el contenido de la segunda página no se muestra. Si cambio el orden de los enlaces, siempre solo el enlace superior obtiene la plantilla correcta.
Aquí es donde defino las rutas y los enlaces a ellas.
class App extends Component {
render() {
return (
<Router>
<div>
<ul><li><Link to="/">Home</Link></li>
<li><Link to="/members">Members</Link></li>
</ul>
</div>
<Switch>
<Public>
<Route exact path="/"><Home /></Route>
</Public>
<Private>
<Route path="/members"><Members /></Route>
</Private>
</Switch>
</Router>
);
}
}
export default App;
Mis plantillas públicas y privadas son las mismas, excepto por los títulos, uno dice privado y el otro público.
class Private extends Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-2"><h2>PRIVATE</h2></div>
<div className="col-md-8">{this.props.children}</div>
<div className="col-md-2"></div>
</div>
</div>
);
}
}
export default Private;
He estado buscando algo como esto durante un tiempo, ya que parece una solución potencialmente ordenada. Si alguien sabe cómo solucionar este problema, se lo agradecería mucho. Gracias
Respuestas
Switch
Esto es lo que hace Component:
React.Children.forEach(this.props.children, child => {
if (match == null && React.isValidElement(child)) {
element = child;
const path = child.props.path || child.props.from;
match = path
? matchPath(location.pathname, { ...child.props, path })
: context.match;
}
});
como ve, el Switch
componente solo se preocupa por el primer nivel de sus hijos y busca un accesorio llamado path or from
así. si no lo encuentra, asume que todos path
coincidirán. por lo que siempre muestra a los primeros hijos pase lo que pase.
lo que debe hacer es cambiar el orden de los niños de esta manera:
<Switch>
<Route exact path="/">
<Public>
<Home />
</Public>
</Route>
<Route path="/members">
<Private>
<Members />
</Private>
</Route>
</Switch>