I have a SPA which has 2 tabs in which data is rendered. The component and corresponding URL structure is as follows:

URL --> Component

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

If I define the routes with each having its own specific URL (sample 1), then the router works; but if use childRoutes to nest the components (sample 2), the the formed URL is displayed the URL bar, but nothing is rendered on the screen.

Sample 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
  }]
}

Works.

Sample 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
            }]
        }]
    }
  ]
}

Does not work. Only the URL is updated in the URL bar but nothing is rendered on the screen. The only change made to the component for Sample 2 is that they contain this.props.children tags to accommodate the childRoute components.

Any ideas would be helpful...thanks in advance!