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?

alphiii
  • 1,597
  • 3
  • 21
  • 27
  • 4
    Have you tried adding a / before readings in your Link tag? – Tahnik Mustasin Jan 12 '17 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 '17 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 "http://localhost:8000/readings/" – Tahnik Mustasin Jan 12 '17 at 11:48
  • 1
    Also, please mark my answer as the current one. Otherwise your post will stay as unsolved. – Tahnik Mustasin Jan 12 '17 at 11:49

1 Answers1

11

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

Tahnik Mustasin
  • 2,216
  • 2
  • 18
  • 21