嵌套路由 ReactJS 的渲染组件

Question

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

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

当我转到 modules/virtual-inputs/add 时，我会渲染我的组件 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 对路由的嵌套级别没有限制。

嵌套路由时，父路由组件将接收到当前匹配的子路由组件为this.props.children。只要你不要忘记使用this.props.children，它们应该可以很好地渲染。

在您的情况下，确保在VirtualInput 组件的render() 方法中使用this.props.children 就足够了。否则它将在this.props.children 中收到AddVirtualInput，但您不会看到它，因为它没有被渲染。

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