ReactJs-复杂树路线

Question

我有这个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 App呈现了以下内容：

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页面。

Answer 1

当您如上所述嵌套<Route> ，React Router将按照https://github.com/rackt/react-router/blob/v1.0.0/docs/guides/basics/RouteConfiguration.md#嵌套相应的组件。 从URL解耦用户界面 。

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