ReactJS - вложенный путь в реакционный маршрутизатор не отображается

Question

Я не могу решить эту проблему, я не могу отобразить HTML моего component что я звоню с nested path лайк /page/detail

Мое дерево маршрутов

render(
    (<Router history={history}>
        <Route path="/" component={App}>
            <IndexRoute component={Index}/>
            <Route path="page" component={Page}>
                <Route path="/page/detail" component={Detail} />
            </Route>
        </Route>
    </Router>),
    document.getElementById('main')
)

Мой компонент {App} отображает это:

render() {
    return (
        <div>
            <nav className="navbar">
                <ul className="nav navbar-nav navbar-right">
                    <li><Link className="menu-link" ref="menu" to="/page">Page Test</Link></li>
                </ul>
            </nav>
            <div id="content-wrapper">{this.props.children}</div>
        </div>
    )
}

Мой маршрут /page/detail вызывается из Link внутри компонента {Page} но если я получаю доступ к этой ссылке, я вижу только то, что отображает компонент {Page}. Я искал решение о вложенных маршрутах с реактивными маршрутизаторами, но не нашел ответа.

ОБНОВИТЬ:

С помощью этого решения я отобразил html моего компонента {Detail}: я вставил его в компонент {Page}

{this.props.children || <div>My Detail page</div> }

ОБНОВЛЕНИЕ 2

В свой компонент {Page} я вставил плагин jQuery.

mix() {
    $("#filter-gallery").mixItUp();
}

destroy() {
    $('#filter-gallery').mixItUp('destroy');
}

componentDidMount() {
    this.mix();
}

componentWillUnmount() {
    this.destroy();
}

Этот плагин работает только на странице обновления {Page}, если я перехожу к /page/detail и затем возвращаюсь к / page, плагин не работает.

Answer 1

Я нашел решение, установив маршруты следующим образом:

<Route path="studio" component={Studio} />
    <Route path="studio/detail" component={Calendar} />