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.

Can you create a fiddle with a small version of the problem? — Josh David Miller
– Josh David Miller, Commented Jan 13, 2016 at 6:00
I took a look at your code and launched a server, and the problem isn't in react (yet). It's in your routing rules in server.js and/or your urls. You are getting the syntax error because it's trying to lookup bundle.js in /dist/department, which doesn't exist. I'm playing with a few things, and I'll comment when I get it to work. — Kris Hardy
– Kris Hardy, Commented Jan 13, 2016 at 19:04
Your asset URLs in index.html need to be absolute. In index.html, add a slash to the beginning of all your link href's, and to your script src's. — Kris Hardy
– Kris Hardy, Commented Jan 13, 2016 at 19:14
It fixed some of my problems. I still have errors relevant to the same subject so I am going to update my post. Thanks! — Florian G
– Florian G, Commented Jan 13, 2016 at 22:09

maharshi oza · Accepted Answer · 2016-01-13 06:50:26Z

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>

answered Jan 13, 2016 at 6:50

maharshi oza

771 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

maharshi oza Over a year ago

I did one minor mistake. Just give Departments path as '/departments' instead of '/'.

Florian G · Accepted Answer · 2016-01-13 22:39:15Z

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!

Collectives™ on Stack Overflow

react router trailing slash not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related