A wrapper around react-router's Link that allows relative paths.

Usage no npm install needed!

<script type="module">
  import aetherallReactRouterRelativeLink from 'https://cdn.skypack.dev/@aetherall/react-router-relative-link';



Build Status


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


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


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.