How to set up dynamic routing of child components in react-router?

Question

React

Friends, hello everyone. I've searched all over stackoverflow, but still haven't found an answer. In the documentation too did not deduct anything adequate.
And so, to the point. There is approximately such a root component that renders the entire tree. In this case, how to adequately set up dynamic routing so that you can adequately follow a direct link to localhost/rooms/${roomId} ? The problem is that when following a direct link, it is impossible to render the child component of the Rooms component. Thanks for the help.

<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

I don't see a problem..
In the Rooms code - by default - this.props.children, since ChatBox is a descendant ...
ps or is there something else you wanted to ask?