Question

修改

我的初步问题包括具有分裂点的路线，但我已将其简化为只是将子路线嵌套在彼此之下的最简单用例。

作为参考，我正在使用the popular react-redux-starter-kit，我正在尝试将一个简单的包装器组件添加到我的路由中，如下所示：

export const createRoutes = (store) => ({
      path: '/',
      component: CoreLayout,
      indexRoute: Home,
      childRoutes: [{
        component: TransitionWrapper,
        childRoutes: [
          CounterRoute(store)
          ]
      }]
    })

但是我收到以下错误，我的子路由没有呈现：

Warning: Failed prop type: Required prop `children` was not specified in `CoreLayout`.
    in CoreLayout (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by AppContainer)
    in div (created by AppContainer)
    in Provider (created by AppContainer)
    in AppContainer

所以基本上如果我在儿童路线上筑巢儿童路线，我会抱怨失踪儿童。

以下是完整设置：

main.js

const MOUNT_NODE = document.getElementById('root')

let render = () => {
  const routes = require('./routes/index').default(store)

  ReactDOM.render(
    <AppContainer
      store={store}
      history={history}
      routes={routes}
    />,
    MOUNT_NODE
  )
}

/routes/index.js

import CoreLayout from '../layouts/CoreLayout/CoreLayout'
import Home from './Home'
import NestedChild from './NestedChild'
import TransitionWrapper from './TransitionWrapper'

export const createRoutes = (store) => ({
  path: '/',
  component: CoreLayout,
  indexRoute: Home,
  childRoutes: [{
    component: TransitionWrapper,
    childRoutes: [
      NestedChild
      ]
  }]
})

AppContainer.js

class AppContainer extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired,
    routes: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
  }

  render () {
    const { history, routes, store } = this.props

    return (
      <Provider store={store}>
        <div style={{ height: '100%' }}>
          <Router history={history} children={routes} />
        </div>
      </Provider>
    )
  }
}

export default AppContainer

CoreLayout.js

import React from 'react'
import Header from '../../components/Header'
import classes from './CoreLayout.scss'
import '../../styles/core.scss'

export const CoreLayout = ({ children }) => (
  <div className='container text-center'>
    <Header />
    <div className={classes.mainContainer}>
      {children}
    </div>
  </div>
)

CoreLayout.propTypes = {
  children: React.PropTypes.element.isRequired
}

export default CoreLayout

TransitionWrappper.js＆lt; --- IS NOT RENDERING

const TransitionWrapper = (props) => (

  <div className="im-not-working">
    {this.props.children}

  </div>
)

export default TransitionWrapper

NestedChild.js＆lt; --- IS NOT RENDERING

Answer 1

您是否尝试从isRequired的{{1}}道具中移除children？

如果您正在动态加载子组件，那么在您将子组件放入其中之前，CoreLayout会有一段时间呈现。

将儿童路线嵌套在另一条儿童路线内

1 个答案: