Does react-router support relative links?

Question

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.com/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).

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

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

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.

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>

Actually react-router support relative links.

Given URL like /clients/invoice/123 the behaviour is:

https://github.com/ReactTraining/react-router/issues/5127