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应用程序呈现：

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#decoupling-the-ui-from-the-url嵌套相应的组件。

如果您不想在<Calendar>下嵌套<Studio>，请不要嵌套相应的路线。

ReactJs - 复杂的树路由

1 个答案: