反应路由器尾随斜线不起作用

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是标签的名称).

基本路线,如/,部门和目标工作正常.

我有点坚持这个.任何意见将是有益的.

完整代码可在此处获取:https://github.com/codeforabq/Open-Budget-ABQ/tree/dev
谢谢.

Answer 1

“根/部门/部门”不起作用。

这背后的原因是——部门不是“部门”的子项。它只是“App”组件的子组件。

如果您想允许“根/部门/部门”产生结果，那么您必须将“部门”作为“部门”的子级。

为此，您必须给出如下所述的路径：

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