react router trailing slash not working

Question

I am using React 0.14.0, React Router 2.0.0-rc4, browserify 11.2.0, babelify 7.2.0.

Here is my router code:

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 works fine but not root/departments/. root/departments/department doesn't work neither. I am not sure why.

Also it seems like any kind of parameter with :myParam is not recognized.

I can't see any difference between my code and the examples provided in the documentation.

Another strange thing is that I don't have the warning:

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

I have:

Uncaught SyntaxError: Unexpected token <        bundle.js:2

And if I click on the bundle.js link in the dev tools of chrome I arrive in the index.html (but bundle.js is the name of the tab).

The basic routes such as /, departements and goals work fine.

I am kind of stuck on this. Any advice would be helpful.

Full code available here: https://github.com/codeforabq/Open-Budget-ABQ/tree/dev
Thanks.

Answer 1

'root/departments/department' won't work.

Reason behind this is- department is not a child of 'departments'. It is the child of only 'App' component.

If you want to allow 'root/departments/department' to produce result,then you have to make 'department' as a child of 'departments.

For that you have to give path as described below:

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

Answer 2

Thanks Kris Hardy for your help about the absolute links. That was the solution to my problem.

After prefixing the URL with a / for absolute. I ended up with:

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

for http://localhost:3000/departments/ and http://localhost:3000/departments/department

Not very helpful.

I tried the php server (php -S localhost:3000) and I got:

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

So in app.jsx I fix this line:

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

to:

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

Now it works perfectly! The parameters work now as well.

Thanks a lot!