ReactJs - 复杂的树形路径答案

【问题标题】：ReactJs - Complex tree routeReactJs - 复杂的树形路径
【发布时间】：2016-02-11 14:18:22
【问题描述】：

我有这个Route 配置（使用react-router 构建）

<Router history={history}>
    <Route path="/" component={App}>
        <IndexRoute component={Index}/>
        <Route path="studio" component={Studio}>
            <Route path="/studio/detail" component={Calendar} />
        </Route>
    </Route>
</Router>

component 应用程序会呈现这个：

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

我的路由 /studio/detail 是从另一个组件调用的，但是当我尝试查看它时，我没有看到我的页面详细信息，而是看到了它的父 /studio 页面。

【问题讨论】：

请看这里：stackoverflow.com/a/27670456/4741567。我认为这可能会回答您的问题。

标签： javascript routes reactjs react-router react-jsx

【解决方案1】：

当您像上面那样嵌套<Route>s 时，React Router 将嵌套相应的组件，每个 https://github.com/rackt/react-router/blob/v1.0.0/docs/guides/basics/RouteConfiguration.md#decoupling-the-ui-from-the-url。

如果您不需要在<Studio>下嵌套<Calendar>，则不要嵌套相应的路由。

【讨论】：