6

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?

4
  • 4
    Have you tried adding a / before readings in your Link tag? Jan 12, 2017 at 11:31
  • 1
    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
    Jan 12, 2017 at 11:42
  • 1
    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" Jan 12, 2017 at 11:48
  • 1
    Also, please mark my answer as the current one. Otherwise your post will stay as unsolved. Jan 12, 2017 at 11:49

1 Answer 1

11

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.