Как передать props через react router?

Question

[Виталий Мудрый]

Доброго времени суток. Изучаю React и начал изучать react-router v4. У меня есть wrapper component в середине которого есть пути для компонентов

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

Компоненты подгружаю через 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
});

Вот код для 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>
    );
  }

Если вывести childrenWithPropsнету и есть только match, location. Может кто-то сталкивался с такой проблемой и знает как решить. Спасибо

Answer 1

[eternalSt]

Доброго времени суток!

Посмотри вот этот вопрос

Comments

[Виталий Мудрый]

Спасибо, я знаю об этом методе. Просто мне кажется как то не эффективно в каждый route всовать render и тем более я использую Loadable для подгрузки компонентов. Может есть другой способ?

[eternalSt]

Виталий Мудрый, других вариантов не знаю. В сети тоже ничего не нашел. А в чем проблема при использовании Loadable?

[Виталий Мудрый]

Спасибо