[英]Render component of nested routes ReactJS
I have nested routes that go 3 levels deep but I'm not able to render the component of my last route. 我嵌套的路线深达3层,但无法渲染最后一条路线的组件。 This is how I structured my routes :
这就是我安排路线的方式:
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/login" component={Login} />
<Route path="/" name="test" component={requireAuthentication(App)}>
<Route path="/modules" name="Modules" component={Modules}>
<Route path="virtual-inputs" name="Virtual Inputs" component={VirtualInput}>
<Route path="add" name="Add new virtual input" component={AddVirtualInput}/>
</Route>
</Route>
</Route>
</Router>
</Provider>
When I go to modules/virtual-inputs/add I get my component VirtualInput rendered. 当我去模块/虚拟输入/添加时,我得到了我的组件VirtualInput。
I render inside modules my child components with this.props.children, but how can I render my component AddVirtualInput when going to /modules/virtual-inputs/add ? 我使用this.props.children在模块内部渲染子组件,但是在/ modules / virtual-inputs / add时如何渲染组件AddVirtualInput?
I saw already on another thread ( https://stackoverflow.com/a/33690586/846326 ) that another solution is to have my routes like this : 我已经在另一个线程( https://stackoverflow.com/a/33690586/846326 )上看到,另一个解决方案是让我的路由像这样:
<Route path="/modules" name="Modules" component={Modules}>
<Route path="virtual-inputs" name="Virtual Inputs" component={VirtualInput}/>
<Route path="virtual-inputs/add" name="Add new virtual input" component={AddVirtualInput}/>
</Route>
Is this the way to do it, meaning we can't go further then 2 levels? 这是这样做的方式,这意味着我们不能再前进2个级别了?
There is no restriction on the level of nesting of routes in React Router. 在React Router中,路由的嵌套级别没有限制。
When you nest routes, the parent route component will receive the current matching child route component as this.props.children
. 当您嵌套路线时,父路线组件将接收当前匹配的子路线组件
this.props.children
。 As long as you don't forget to use this.props.children
, they should render just fine. 只要您不忘记使用
this.props.children
,它们就应该可以正常渲染。
In your case, it should be enough to make sure that you use this.props.children
in the render()
method of the VirtualInput
component. 在您的情况下,应该足以确保在
VirtualInput
组件的render()
方法中使用this.props.children
。 Otherwise it will receive AddVirtualInput
in this.props.children
but you won't see it since it doesn't get rendered. 否则它将在
this.props.children
收到AddVirtualInput
,但由于未呈现,因此您将看不到它。
If you already did that, please share the full code of the components to further diagnose the issue. 如果您已经这样做,请共享组件的完整代码以进一步诊断问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.