React router Link wrong url

Question

I am using React router with Link to change urls and navigate trough app. In list of readings I navigate user to reading edit with this code:

 <Link to={`readings/edit/${reading.id}`} params={{id: reading.id}}>

I have defined the following routes:

<Route path="/" component={App}> <IndexRoute component={Greetings}/> ... <Route path="readings/edit/:id" component={requireAuth(ReadingEdit)}/> <Route path="readings/:tab" component={requireAuth(ReadingListContainer)}/> ... </Route>

The navigation works as it should, but the URL is wrong it should be http://localhost:8000/readings/edit/5 but instead it is http://localhost:8000/readings/readings/edit/5. This means that when I refresh site the router does not find a path.

How can I sole that problem?

ohh man, that is the solution. Big thanks, and I was speding like 2 hours to figure that one out... But why does Link do that??? — alphiii
– alphiii, Commented Jan 12, 2017 at 11:42
Link probably uses / as the root path and adds the rest of it to the root. If you don't use / the it is using the current URL in your browser as root. So my guess is the URL you are routing from is "localhost:8000/readings" — Tahnik Mustasin
– Tahnik Mustasin, Commented Jan 12, 2017 at 11:48
Also, please mark my answer as the current one. Otherwise your post will stay as unsolved. — Tahnik Mustasin
– Tahnik Mustasin, Commented Jan 12, 2017 at 11:49

Tahnik Mustasin · Accepted Answer · 2017-01-12 11:49:38Z

11

As discussed in the comment, adding a / before readings in your Link tag will fix the issue.

answered Jan 12, 2017 at 11:49

Tahnik Mustasin

2,2963 gold badges21 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

React router Link wrong url

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related