使用react-router childRoutes

问题描述 投票:3回答:0

我有一个SPA,它有2个标签,在其中呈现数据。 组件和相应的URL结构如下:

URL --> Component

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

如果我定义路由,每个路由都有自己的特定URL(样本1),那么路由器工作; 但是如果使用childRoutes来嵌套组件(示例2),则形成的URL将显示在URL栏中,但屏幕上不会显示任何内容。

样本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
  }]
}

作品。

样本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
            }]
        }]
    }
  ]
}

不行。 只有URL在URL栏中更新,但屏幕上没有任何内容呈现。 对示例2的组件所做的唯一更改是它们包含this.props.children tags以容纳childRoute组件。

任何想法都会有所帮助......在此先感谢!

reactjs components react-router
© www.soinside.com 2019 - 2024. All rights reserved.