Does react-router support relative links? Does react-router support relative links? reactjs reactjs

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


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.