0
329
VistasReact-router: ¿Cómo funcionan las rutas anidadas?
Tengo una aplicación de reacción con react-router. Estoy tratando de configurar rutas anidadas:
"/" --> home page "/products" --> products list (child component of home page) "/products/new" --> new product: child component of products listLo que traté de hacer hasta ahora:
<Route path="/" component="home" > <Route path="products" component="products" > <Route path="new" component="products_new" /> </Route> </Route> Ahora, en el navegador de mi página de inicio predeterminada, cuando presiono "/products" , el componente de productos se carga y puedo ver mi lista de productos. Pero cuando presiono "products/new" no pasa nada. Me sale una página en blanco. Si presiono "/new" (no anidado), funciona (la página product_new se carga dentro de su padre). (este "/products/new" no funciona; este "/new" funciona)
Eché un vistazo a esta pregunta en github Problema con rutas anidadas #687 . La solución dice:
Descubrí mi problema. Las rutas principales siempre se llaman. Esa es la intención. Pero los componentes secundarios deben tener
<Router.RouteHandler/>repetido para ser renderizados.
No puedo entender esta solución. ¿Qué significa: "pero los componentes secundarios deben haber repetido <Router.RouteHandler/> para renderizarse"?
EDIT1: Aquí están mis componentes (enrutadores y vistas):
Mi jerarquía de enrutamiento:
<Route path="/" > <IndexRoute component={Home}/> <Route path="products"> <IndexRoute component={Products} /> <Route path="new" component={Products_New} /> </Route> </Route> </Router>Mi componente de casa:
<div className="col-lg-12"> <h1>Home page</h1> <hr /> {this.props.children} </div>Componentes de mis productos:
<div> <div className="col-lg-12"> <h1>Products</h1> </div> <hr /> {this.props.children} </div>- Mi producto-nuevo componente:
1 Respuestas
Responde la pregunta0
¿Has echado un vistazo a IndexRoutes? Si no es así, lea al respecto en la documentación oficial . Su problema aquí es que cuando visita /products/new , react-router intenta representar todos los componentes que están por encima de su ruta products_new .
Este comportamiento está pensado si desea representar un componente secundario dentro del componente principal. Permítame demostrarlo con un par de ejemplos:
Ejemplo 1
Considere el siguiente componente de home que tiene un encabezado y un pie de página que se incluyen en todas las páginas.
<Header /> <div>{this.props.children}</div> </Footer />con el siguiente enrutamiento:
<Route path="/" component={home} > <Route path="products" component={products} /> </Route>- Visitar
/generaría una página con solo un<Header />, un<div>vacío y un<Footer />. - Visitar
/productsmostraría una página como la anterior, pero el<div>ahora contendría su componente<Products />.
Dado que en su código (probablemente) no representa {this.props.children} , siempre obtendrá el componente principal <Home /> , independientemente de si visitó / o /products .
Este comportamiento es útil para cosas que envuelven los elementos principales de su sitio, como menús, pancartas, barras laterales, etc.
Ejemplo 2
Ahora considere nuevamente el mismo componente de home :
<Header /> <div>{this.props.children}</div> </Footer />pero con esta ruta:
<Route path="/"> <IndexRoute component={home} <Route path="products" component={products} /> </Route>- Visitar
/generaría una página con solo un<Header />, un<div>vacío y un<Footer />. - Visitar
/productsahora representaría su componente<Products />por sí solo , sin estar envuelto dentro del componente principal<Home />.
TL;RD
Si, en cambio, desea que cada ruta represente componentes individuales, y no todo lo que se encuentra debajo del árbol de esa ruta, debe usar la siguiente ruta en su lugar:
const browserHistory = useRouterHistory(createHistory)({basename: '/'}); ReactDOM.render( <Route history={browserHistory}> <Route path="/"> <IndexRoute component={home} /> <Route path="products" > <IndexRoute component={products} /> <Route path="new" component={products_new} /> </Route> </Route> </Router>, document.getElementById('content') );