Does react-router support relative links?
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).
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.