react-router-relative-link

TL;DR

• A wrapper around react-router's <Link /> and <NavLink /> that allows relative paths.
• Now supports react-router-dom version 4!

Install

> npm i react-router-relative-link --save

Usage

To use react-router-relative-link, simply import it (ES6) as Link in place of react-router-dom then dot and dot-dot to your heart's content.

So in your code, replace this:

import { Link } from "react-router-dom";

with the following and you're good to go!

import { Link } from "react-router-relative-link";

Here is a real world example. Notice that you don't need to know that you are at the base base /zoo, just like everywhere else in web land.

import { Link } from "react-router-relative-link";
 
export default class MyZoo extends React.Component {
    render() {
        return (
            <p>Welcome to the Lions Den at /zoo/lions</p>
            <Link to="..">Back to the Zoo Entrance</Link>
            <Link to="../giraffes">Visit the Giraffes</Link>
            <Link to="../monkeys">Visit the Monkeys</Link>
            <Link to="mountain">Visit the Mountain Lions</Link>
        );
    }
}

react-router-relative-link support passing to as a string or as an object with a pathname property, just like react-router.

It also works with both Link and with NavLink.

Does it Work?

Of course it does, and I have the tests to prove it! See the test results here.

You can also see it running live on this CodeSandbox.