Question

我有一个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组件。

任何想法都会有所帮助......提前感谢！

使用react-router childRoutes

0 个答案: