react router relative link does not link properly

Question

So I'm using the npm package react-router-relative (https://www.npmjs.com/package/react-router-relative) but it doesn't seem to be switching the url properly.

Here's what my links looks like:

<Link to='items' className="btn btn-default submission-button">Items</Link>
<Link to='maps' className="btn btn-default submission-button">Maps</Link>

Here's my routing:

<Route path="submissions" component={SubmissionPage}>
    <Route path="items" component={ItemSubmissions}></Route>
    <Route path="maps" component={MapSubmissions}></Route>
</Route>

what happens is the first time I click on the link it'll link properly i.e.

http://localhost:3000/#/account/submissions/items

but when I hit it again it'll go to:

http://localhost:3000/#/account/submissions/items/items

at this point the end part will switch rather than append, but throws an error.

However, I'm trying to make the part right after 'submission' switch, i.e. account/submissions/items account/submissions/maps.

What am I doing wrong?

I've tried a non-relative link variation of this, i.e. {this.props.location.pathname + '/items'} but it just does the same thing.

Answer 1

First, let's emphasis on the concept of relative link. It is a link that will bring you somewhere depending on where you already are.

Meaning, result will vary if you use the same relative link in different places (URLs). The direct implication is that if you want only one given behaviour for a relative link, you cannot use it at several places.

What happens in your case is that the same relative link appears for different URLs, leading to different results.

What can you do: As pointed earlier, you could use currentPath props, suggested in the page you linked here. The result would be something like:

<Link to='items' currentPath='/submissions'>Items</Link>
<Link to='maps' currentPath='/submissions'>Maps</Link>

Which looks like a disguised absolute path:

<Link to='/submissions/items'>Items</Link>
<Link to='/submissions/maps'>Maps</Link>

A solution for relative paths would be:

<Link to='../items'>Items</Link>
<Link to='../maps'>Maps</Link>

But keep in mind that those links, being relative, should only be displayed in one place, in your case #/submissions/somewhere

If you want a link that brings you to the same page regardless of the current location, you should use absolute links.

So far, I haven't come up with many uses for relative links. Go back: <Link to="..">Go back</Link> Or maybe common actions: <Link to="./edit">Edit</Link>

To conclude, I would say that there is no need for relative links when only one behaviour is expected. One behaviour means one route, and if you know the route, you might as well use an absolute link. Relative links should be used only when you expect different behaviours.