javascript - react 路由器尾部斜杠不起作用

Question

我正在使用 React 0.14.0、React Router 2.0.0-rc4、browserify 11.2.0、babelify 7.2.0。

这是我的路由器代码:

render((
<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Departments} />
    <Route path="goals" component={Goals} />
    <Route path="departments" component={Departments} >
      <Route path="department" component={Department} />
    </Route>
  </Route>
</Router>
), document.getElementById('react-container'))

root/departments 工作正常但 root/departments/不行。 root/departments/department 也不起作用。我不确定为什么。

此外，似乎无法识别带有 :myParam 的任何类型的参数。

我看不出我的代码与文档中提供的示例有任何区别。

另一个奇怪的是我没有警告:

Warning: [react-router] Location "undefined" did not match any routes

我有:

Uncaught SyntaxError: Unexpected token <        bundle.js:2

如果我在 chrome 的开发工具中单击 bundle.js 链接，我将到达 index.html(但 bundle.js 是选项卡的名称)。

/、departments、goals等基本路由都可以正常工作。

我有点卡在这上面了。任何意见将是有益的。

此处提供完整代码:https://github.com/codeforabq/Open-Budget-ABQ/tree/dev
谢谢。

Answer 1

'root/departments/department' 将不起作用。

这背后的原因是 - department 不是“departments”的子级。它是唯一的“App”组件的子组件。

如果你想让'root/departments/department'产生结果，那么你必须让'department'成为'departments'的 child 。

为此你必须给出如下所述的路径:

<Router history={browserHistory}>
  <Route path="/" component={Departments}>
    <IndexRoute component={Goals} />
      <Route path="department" component={Department} />
    </Route>
  </Route>
</Router>