react路由器尾部斜线不起作用

react router trailing slash not working

本文关键字：不起作用 尾部 路由器 react      更新时间：2023-09-26

我使用的是React 0.14.0、React Router 2.0.0-rc4、browserfy 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/documents运行良好，但root/documents/不正常。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
谢谢

"根/部门/部门"不起作用。

这背后的原因是——部门不是"部门"的子代。它是唯一的"应用程序"组件的子级。

如果你想让"根/部门/部门"产生结果，那么你必须把"部门"作为"部门"的子级。

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

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

感谢Kris Hardy对绝对链接的帮助。这就是解决我问题的办法。

在URL前面加上/表示绝对值。我最终得到了：

Error: Invalid value for <path> attribute d="M2.4492935982947065e-15,-40A40,40 0 1,1 NaN,NaNL0,0Z"

forhttp://localhost:3000/departments/和http://localhost:3000/departments/department

帮助不大。

我尝试了php服务器（php-S localhost:3000），得到了：

GET http://localhost:3000/departments/app/data/budget-first-test.tsv 404 (Not Found)
Uncaught #<XMLHttpRequest>

因此，在app.jsx中，我修复了以下行：

var dataPath = 'app/data/budget-first-test.tsv';

至：

var dataPath = '/app/data/budget-first-test.tsv';

现在它工作得很完美！参数现在也可以工作了。

非常感谢！

相关文章：