Tengo un SPA que tiene 2 pestañas en las que se procesan los datos. El componente y la estructura de URL correspondiente es el siguiente:

 URL --> Component / --> PostContainer /create --> MessageFormContainer /update/:id --> MessageUpdatesContainer /update/:id/infoCreate --> InfoCreateContainer /update/:id/infoView/:id --> InfoViewContainer

Si defino las rutas y cada una tiene su propia URL específica (ejemplo 1), entonces el enrutador funciona; pero si usa childRoutes para anidar los componentes (ejemplo 2), la URL formada se muestra en la barra de URL, pero no se muestra nada en la pantalla.

Muestra 1:

 const AppRoutes = { path: '/', component: MainContainer, indexRoute: { component: PostsContainer }, childRoutes: [{ path: 'create', component: MessageFormContainer },{ path: 'update/:id', component: MessageUpdatesContainer, },{ path: 'update/:id/infoCreate', component: InfoCreateContainer },{ path: 'update/:id/infoView/:id', component: InfoViewContainer }] }

Obras.

Muestra 2:

 const routes = { path: '/', component: MainContainer, indexRoute: { component: PostsContainer }, childRoutes: [ { path: 'create', component: MessageFormContainer }, { path: 'update/:id', component: MessageUpdatesContainer, childRoutes: [{ path: 'infoCreate', component: InfoCreateContainer },{ path: '/infoView/:id', component: InfoViewContainer }] }] } ] }

No funciona. Solo la URL se actualiza en la barra de URL, pero no se representa nada en la pantalla. El único cambio realizado en el componente para la Muestra 2 es que contienen this.props.children tags para acomodar los componentes childRoute.

Cualquier idea sería útil ... ¡gracias de antemano!