[英]Nesting child routes within another child route
EDIT 编辑
My Initial question included routes with split points, but I've reduced it to the most simple use case of just nesting child routes under each other. 我的初始问题包括具有分裂点的路线,但我已将其简化为仅在彼此之间嵌套子路线的最简单用例。
For reference I'm using the popular react-redux-starter-kit and I'm trying to add a simple wrapper component to my routes like so: 作为参考我正在使用流行的react-redux-starter-kit ,我试图在我的路由中添加一个简单的包装器组件,如下所示:
export const createRoutes = (store) => ({
path: '/',
component: CoreLayout,
indexRoute: Home,
childRoutes: [{
component: TransitionWrapper,
childRoutes: [
CounterRoute(store)
]
}]
})
but I get the following error and my child routes aren't being rendered: 但我得到以下错误,我的子路线没有呈现:
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
So basically if I nest child routes in a child route I get a complaint about missing children. 所以基本上如果我在儿童路线上筑巢儿童路线,我会抱怨失踪儿童。
Here is the full setup: 这是完整的设置:
main.js 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 /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 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 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 <--- IS NOT RENDERING TransitionWrappper.js <---不是渲染
const TransitionWrapper = (props) => (
<div className="im-not-working">
{this.props.children}
</div>
)
export default TransitionWrapper
NestedChild.js <--- IS NOT RENDERING NestedChild.js <--- IS NOT RENDERING
Have you tried just removing isRequired
from the children
prop of CoreLayout
? 您是否尝试isRequired
的children
道具中CoreLayout
?
If you are loading your child components dynamically, there will be a period of time where the CoreLayout
renders before you've got child components to put in it. 如果要动态加载子组件, CoreLayout
将会有一段时间在您将子组件放入其中之前呈现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.