这个反应路线有什么问题

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}，具体取决于您的路由器版本）。然后通过嵌套路由将适当的子组件嵌入到父组件中。