react-router pass previous routes props to sub route

Question

Is there a way to pass props from the Parent component down to the Child component using react-router?

<Route path="/parent/" component={Parent} />
<Route path="/parent/child/" component={Child} />

Notice Child is not rendered in the Parent's render function.

Thanks

Answer 1

I think a good solution here would be nested routes with render props.

// Parent.jsx

render() {
  const { match: { url }, xyz } = this.props;
  return (
    <Route path={`${url}/child`} render={() => <Child xyz={xyz} />}
  );
}