Question

我无法获得匹配的嵌套路线：

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home} />
    <Route path="about" component={About} />
    <Route path="work" component={Work}>
      <Route path=":slug" component={Sample} />
    </Route>
  </Route>
</Router>

鉴于此路由器，我无法匹配路由，例如：/work/sample-1应用程序不会抛出错误，也无法在Sample类上记录任何语句。

即使我对我试图匹配的值进行硬编码，也无法正常工作。如果我取消嵌套路线，并将路径设置为work/:slug，它将按预期工作。

我做错了什么？

Answer 1

我认为你的嵌套IndexRoute：

中可能遗漏了:slug route

<Router history={browserHistory}>
  <Route path="/" component={App}>
  <IndexRoute component={Home} />
  <Route path="about" component={About} />
  <Route path="work" component={Work}>
    <IndexRoute component={SomeComponent}/> <<------ This guy
    <Route path=":slug" component={Sample} />
  </Route>
</Route>

至少这是反应路由器文档显示的内容：https://github.com/reactjs/react-router/blob/master/docs/Introduction.md#adding-more-ui

Answer 2

最后找到了我在React Router Github Page上的"sidebar"示例中寻找的模式

我嵌套了路线：

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <Route path="work" component={Work}>
      <Route path=":slug" component={Sample} />
    </Route>
  </Route>
</Router>

然后在render组件的Work方法中，我只需要显示路径的子项或组件的其余部分：

render() {
    <div>
        {this.props.children ||
        <div>
            {/* rest of "Work" component here */}
        </div>}
    </div>
}

现在，当我导航到嵌套路线时，我的导航项目被选中，并显示嵌套内容。

使用React Router无法获得匹配的嵌套路由

2 个答案: