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?

Answer 1

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