Как вынести общий шаблон для страниц в React Router?

Question

[Username]

Добрый день, Есть каркас сайта в компоненте MainLayout, который принимает {this.props.children}

В библиотеки react-router можно было делать вложенность, как видно я создаю Route указываю для него шаблон MainLayout и все потомки, которые будут указаны в нём будут переданы как {this.props.children}.

Как сделать такое же в библиотеке react-router-dom?

ReactDOM.render((
  <Router>
    <Route component={MainLayout}>
      <Route path="/" component={Home} />
      <Route component={SearchLayout}>
        <Route path="users" component={UserList} />
        <Route path="widgets" component={WidgetList} />
      </Route> 
    </Route>
  </Router>
), document.getElementById('root'));

Answer 1

[kn1ght_t]

не очень понятно, зачем вам роуты без путей
может быть, mainlayout и searchlayout должны сами принимать в себя через пропсы нужные компоненты?
либо просто сделать дивы с нужными стилями и в них засунуть роуты)

Comments

[Username]

Вот по этой статье делал, думаю она прояснит вопрос)
Пункт Повторное использование лайаута
https://getinstance.info/articles/react/learning-r...

[Антон Спирин]

Username, вы бы год написания статьи перед тем как приступать посмотрели. Она по react-router 2. Можете смело забыть все, что прочитали, открыть документацию/статью по react-router 4 и изучать.

[Username]

Антон Спирин, Да я понимаю, что синтаксис используется старый, но как мне реализовать то что написано в статье современными средствами?

[Антон Спирин]

Username, не надо такое реализовывать. Сейчас используются несколько иные подходы.

[Username]

Антон Спирин, Поделитесь тогда статьями)

[Антон Спирин]

Username, я их не пишу) Тут лежит краткое руководство и вся документация API. В принципе, опытному разработчику этого более чем достаточно. За конкретными рецептами гуглите статьи по react-router 4 и репозитории с типовыми приложениями.