Using react-router childRoutes - reactjs

Question

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!