ReactJS-未呈現react-router嵌套路徑

Question

我無法解決此問題，無法渲染從nested path例如/page/detail調用的component的HTML

我的路線樹

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是通過組件{Page}內的Link調用的，但是如果我訪問此鏈接，我只會看到{Page}組件呈現的內容。 我已經搜索了一些有關帶有react-router的嵌套路由的解決方案，但沒有找到答案。

更新：

通過此解決方案，我已經渲染了{Detail}組件的html：我已將其插入{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 / detail然后返回/ page，則此插件僅在{Page}刷新頁面上起作用，該插件不起作用。

Answer 1

我通過以這種方式設置路由找到了一種解決方案：

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