Question

我有三层深度的嵌套路线，但我无法渲染上一条路线的组件。这就是我构建路线的方式：

<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>

当我去模块/虚拟输入/添加时，我得到我的组件VirtualInput呈现。

我使用this.props.children在模块内部渲染我的子组件，但是如何在转到/ modules / virtual-inputs / add时渲染我的组件AddVirtualInput？

我已经在另一个线程（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>

这是否可以做到这一点，这意味着我们不能超过2个级别？

Answer 1

React Router中的路由嵌套级别没有限制。

当您嵌套路由时，父路由组件将接收当前匹配的子路由组件$operator = "<> 'NA' and t.value >";。只要你不忘记使用this.props.children，他们应该渲染得很好。

在您的情况下，应该足以确保在this.props.children组件的this.props.children方法中使用render()。否则它会在VirtualInput中收到AddVirtualInput，但由于无法呈现，因此您无法看到它。

如果您已经这样做，请分享组件的完整代码以进一步诊断问题。

渲染嵌套路由ReactJS的组件

1 个答案: