React-Router V4 with React.cloneElement

Previously with React-Router:

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

When you’d like to pass on the current route’s props to it’s children. For example, if you have /projects/123 and /projects/123/additions but don’t want to fetch or look for that project in the store for additions route, you may use the code above.

With V4 and this.props.children no longer being passed, you can do the following:

renderMatchWithProps = MatchedComponent =>
matchProps => <MatchedComponent {...this.props} {...matchProps} />
render() {
return (
<Match pattern={`${pathname}/additions`} render={this.renderMatchWithProps(Additions)} />
);
}
Like what you read? Give Mohamed El Mahallawy a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.