reactjs - 如何将所有父 Props 传递给使用 {this.props.children} 的所有嵌套路由子级

Question

我想将所有父级 Prop 传递给嵌套路由中的子级路由

<NestedRoute path="/Resident" component={Resident} >
    <SubRoute path="/dashboard" component={Dashboard} />
    <SubRoute path="/policies/index" component={Policies}/>
    <SubRoute path="/pages/create-account" component={CreateAccount} />
    <SubRoute path="/pages/empty-page" component={EmptyPage} />
    <SubRoute path="/pages/under-maintenance" component={UnderMaintenance} />
    <SubRoute path="/pages/error-page" component={ErrorPage} />
</NestedRoute>

我正在使用{this.props.children}显示此路线。我想使用 this.props.history.push 以编程方式在嵌套路由中的页面之间导航我收到未定义的错误推送。所以我想传递所有父级 Prop 。但我不知道怎么办。

我已经尝试过

React.Children.map(this.props.children, (child => React.cloneElement(child, this.props)))

没成功。我的最终目标是从嵌套路线以编程方式导航。

Answer 1

如果使用render来代替Route上的component来进行组件渲染，可以通过这种方式实现。

<Route path = "/dashboard" render = {
    (props) => (<Dashboard {...props}/>)
} />

<Route path = "/policies/index" render = {
(props) => (<Policies {...props}/>)
} />