How to pass props through react router?

Question

JavaScript

Good day. I'm learning React and started learning react-router v4. I have a wrapper component in the middle of which there are paths for the components

const User = props => (
  <Wrapper {...props}>
      <Route path='/users/:id' component={AboutComponent} exact />
      <Route path='/users/:id/photos' component={PhotosComponent} />
      <Route path='/users/:id/friends' component={FriendsComponent} />
  </Wrapper>
);

Components are loaded using Loadable

const Loading = () => <div>Loading...</div>;

const AboutComponent = Loadable({
  loader: () => import('./About'),
  loading: Loading
});

const PhotosComponent = Loadable({
  loader: () => import('./Photos'),
  loading: Loading
});

const FriendsComponent = Loadable({
  loader: () => import('./Friends'),
  loading: Loading
});

Here is the code for Wrapper component

render() {
    const childrenWithProps = React.Children.map(this.props.children, child => {
      return React.cloneElement(child, { user: 'Elon Musk' });
    });

    console.log(childrenWithProps);
    return (
      <div id="wrapper">
        <div className="row">
          <div className="col-lg-3 ">
            <img
              className="img-fluid"
              src="/avatar-2.jpg"
              alt="Elon Musk" />
          </div>
          <div className="col-lg-9 user-info">
            <h2>Elon Musk</h2>
            <nav>
              <Link to={`/users/${this.props.user.id}`} exact>
                About
              </Link>
              <span className="mx-1"></span>
              <Link to={`/users/${this.props.user.id}/photos`}>
                Photos
              </Link>
              <span className="mx-1"></span>
              <Link to={`/affiliates/users/${this.props.user.id}/friends`}>
                Friends
              </Link>
            </nav>
          </div>
        </div>
        {childrenWithProps}
      </div>
    );
  }

If you print childrenWithProps there is no and there is only match , location . Maybe someone faced such a problem and knows how to solve it. Thanks

Answer 1

Good day!
Look at this question