Как настроить динамический роутинг дочерних компонентов в react-router?

Question

[Itvanya]

Друзья, всем привет. Уже весь stackoverflow перешарил, но ответа так и не нашел. В документации тоже не вычитал ничего адекватного.
И так, к делу. Есть примерно такой root компонент, который рендерит все дерево. Как таком случае адекватно настроить динамический роунтинг, чтобы можно было адекватно перейти по прямой ссылке на localhost/rooms/${roomId} ? Проблема именно в том, что при переходе по прямой ссылке невозможно отрендерить дочерний компонент компонента Rooms. Спасибо за помощь.

<Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App} onEnter={requireAuth}>
              <Route path="/rooms" component={Rooms} >
                <Route path={`/rooms/:chatroomId`} component={ChatBox} />
              </Route>
              <Route path="/login" component={LoginForm} />
            </Route>
        </Router>
    </Provider>

Answer 1

[Максим]

Не вижу проблемы..

<Route path={"/rooms/:chatroomId"} component={ChatBox} />

В коде Rooms - стандартно - this.props.children, так как ChatBox является потомком...

p.s. или вы что-то иное хотели спросить?

Comments

[Itvanya]

Максим потомок то рендерится, но при прямой ссылке(например, localhost/rooms/123456789, где id - 123456789), а не переходе по Link, ничего не редерится.

[Максим]

Itvanya: значит проблема не в этом. При прямой ссылке у вас скорее всего просто не находит bundle.js, (посмотрите в network в dev tools)

[Максим]

Itvanya: тут есть подробности React-router пути не работают. Как вылечить?