react-router pass previous routes props to sub route

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

1 answer

  • answered 2018-07-11 04:35 Sukrit Chhabra

    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} />}
      );
    }