ReactJS - 未呈现反应路由器嵌套路径答案

【问题标题】：ReactJS - react-router nested path not renderedReactJS - 未呈现反应路由器嵌套路径
【发布时间】：2015-11-11 11:10:50
【问题描述】：

我无法解决这个问题，我无法呈现我从 nested path 调用的 component 的 HTML，例如 /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} 组件呈现的内容。我已经用 react-routers 搜索了一些关于嵌套路由的解决方案，但我没有找到答案。

更新：

通过这个解决方案，我渲染了我的 {Detail} 组件的 html：我已将其插入到 {Page} 组件中

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

更新 2

在我的 {Page} 组件中，我插入了一个 jQuery plugin。

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

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

componentDidMount() {
    this.mix();
}

componentWillUnmount() {
    this.destroy();
}

此插件仅在 {Page} 刷新页面有效，如果我导航到 /page/detail 然后返回 /page 插件不起作用。

【问题讨论】：

这基本上就是您问题的答案。每次在父路由中嵌套一些路由时，为了显示它们，您需要将 this.props.children 添加到父路由组件
是的，我在几分钟前就做到了，而且效果很好。但是现在我在这个子组件中安装的所有 javascript 都不起作用
你也可以展示这个组件吗？可能你在那里做错了什么
我一开始也没有发现你的Detail 组件路由的路径应该是：path='detail'，这将匹配 URL：/page/detail，通过做你所做的（ path='/page/detail') 你定义的绝对路径
问题已更新。我已经插入了我在render() 之前所做的事情

标签： javascript reactjs single-page-application react-router react-router-component

【解决方案1】：

我通过这种方式设置路线找到了解决方案：

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

【讨论】：

在我的情况下，我需要斜杠作为路径的前缀。所以path="/studio/detail"