Javascript 嵌套路由的渲染组件

我有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时，我会呈现我的组件virtual input

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

我已经在另一个线程（）上看到另一个解决方案是让我的路由如下：

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

---

这是这样做的吗？这意味着我们不能再往前走两个级别了？

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

嵌套管线时，父管线组件将以

this.props.children

的形式接收当前匹配的子管线组件。只要您不忘记使用

this.props.children

，它们的渲染效果应该很好

在您的情况下，确保在

VirtualInput

组件的

render（）

方法中使用

this.props.children

就足够了。否则它将在

this.props.children

中接收

AddVirtualInput

，但您将看不到它，因为它不会被渲染

---

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

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

嵌套管线时，父管线组件将以

this.props.children

的形式接收当前匹配的子管线组件。只要您不忘记使用

this.props.children

，它们的渲染效果应该很好

在您的情况下，确保在

VirtualInput

组件的

render（）

方法中使用

this.props.children

就足够了。否则它将在

this.props.children

中接收

AddVirtualInput

，但您将看不到它，因为它不会被渲染

---

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

我正在我的父组件模块和虚拟输入中执行{React.cloneElement（this.props.children，{…this.props}}），但当转到我的子组件之一时，会导致未捕获的RangeError：超过最大调用堆栈大小。我有另一个例子，我有完全相同的问题。请参阅：如果执行

{React.cloneElement（this.props.children，{…this.props}}}

，则实际上是将

子对象

作为道具传递给

子对象

本身，从而创建了一个无限的层次结构。为什么需要

React.cloneElement（）

在那里？您可以直接渲染

this.props.children

。如果你真的需要传递所有的道具（为什么？我看不到你在使用它们），你可以做一些像

var{children，…rest}=this.props

然后

React.cloneElement（儿童，休息）

。我仍然不明白为什么。我在我的父组件模块和虚拟输入中执行{React.cloneElement（this.props.children，{…this.props}}），但是当转到我的一个子组件时，会导致未捕获的范围错误：超过最大调用堆栈大小。我有另一个例子，我有完全相同的问题。请参阅：如果执行

{React.cloneElement（this.props.children，{…this.props}}}

，则实际上是将

子对象

作为道具传递给

子对象

本身，从而创建了一个无限的层次结构。为什么需要

React.cloneElement（）

在那里？您可以直接渲染

this.props.children

。如果你真的需要传递所有的道具（为什么？我看不到你在使用它们），你可以做一些像

var{children，…rest}=this.props

然后

React.cloneElement（儿童，休息）

。我还是不明白为什么。