ReactJs-复杂树路由

Question

我有以下路由配置（用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>

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

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

如果不需要将 嵌套在 下，则不要嵌套相应的路由。