javascript - 这个 react 路线有什么问题

Question

我有这个路由配置 react-router:

render((
    <Router history={browserHistory}>
        <Route path="/" component={PoApp}>
            <IndexRoute component={Home} />
            <Route name="category" path="notices/:category" component={Category}>
                <Route name="notice" path=":id" component={Content} />
                <IndexRoute component={Home} />
            </Route>
        </Route>
    </Router>
), document.getElementById('poApp'));

对于 / 和 notices/:category 工作正常

但是对于 :id (这将是/notices/:category/:id)，它仍然加载 Category 组件。怎么了？

如果我不清楚的话，我在这里举了一些应该如何工作的示例:

/ => PoApp

/notices/cars => 类别

/notices/cars/2 => 内容

Answer 1

根据类似question的答案，嵌套路由用于嵌入嵌套组件，而不是在嵌套路由中引用不同的组件。

就您而言，Category组件应该有一个子组件的占位符(例如<RouteHandler />或{this.props.children}，具体取决于您的路由器版本)。然后通过嵌套路由，适当的子组件将嵌入到父组件中。