react-router-relative-link

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-router-relative-link
1954.0.25 years ago6 years agoMinified + gzip package size for react-router-relative-link in KB

Readme

react-router-relative-link
Build Status
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.