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

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.