使用 react-router v4 将道具传递给子组件

Question

之前在 react-router v3.* 我通过

将 props 传递给子组件

React.cloneElement(this.props.children, this.props)

这是如何在 react-router v4 中使用新的 <Match /> API

完成的

到目前为止，我想出的解决方案是在 <Match /> API:

中使用 render 方法

<Match pattern="/" render={() => <ChildComponent {...this.props} />} />

使用 ES6 扩展语法将 props 传递给子组件。有没有更好的方法也可以将所有标准道具（位置、模式、路径名、isExact）携带到子组件？

Answer 1

根据the render code of v4.0.0-alpha5判断，您有以下两个选择：

<Match pattern="/" render={props => <ChildComponent {...props} {...this.props} />} />
<Match pattern="/">{({matched, ...props}) => {
    return matched ? <ChildComponent {...props} {...this.props} /> : null;
}}</Match>

另见 Match API documentation.

使用 react-router v4 将道具传递给子组件

Passing props to children components with react-router v4

javascript

reactjs

react-router

react-router-component