Does react-router support relative links?

Question

I'm on this url:

/path1/path2

Then:

<Link to="path2/path3" />

With this code the address in the address bar is changed to:

/path1/path2/path3

It seems to have worked: it has gone to the last / and added the new path to that. But, in fact, while it changes the url in the address bar no navigation happens.

It looks like Links have to be given absolute urls?

Answer 1

Yes. Use the react-router-relative-links library. It was written by Ryan Florence, one of the original authors of react-router.

To use your example, you'd want to use:

{ RelativeLink } = require 'react-router-relative-links'
...
<RelativeLink to="./path3">My link text</RelativeLink>

Answer 2

in react-router v4 relative paths are supported. The history library resolves relative paths 'just like a browser would' so that a

<Link to="two" />

or a

history.push({ pathname: '..', search: 'foo=bar' });

at the url site/path/one will redirect to site.com/path/two and site.com/three?foo=bar.

However NavLink does not work with relative pathnames because it doesn't resolve it's own relative path (which is nontrivial to do). However there are some community packages for this, but I haven't tested them.

Alternatively, and this is what I do, you can get a match object from your parent Route (or from the context router.route.match) and use it to build your relative to in NavLink:

<NavLink to={`${match.url}/three`} />

this way your component can work independent of it's parent Route(s).

Answer 3

As per the API documentation, links must be absolute:

The to property of a Link must be a location descriptor, which is either a string (where it's explicitly stated that

relative paths are not supported

), or an object with a pathname property, which is absolute (by its definition), too.

There is an open issue discussing relative links, which seems to indicate that relative paths may be supported in future.

Everything said here applies to react-router version 2.x and above.

Answer 4

It is not supported, but you can easily generate an absolute path:

<Link to={this.props.location.pathname + '/path3'}>