https://github.com/donavon/react-router-relative-link
Allows react-router's Link component to accept relative paths.
https://github.com/donavon/react-router-relative-link
Last synced: 7 months ago
JSON representation
Allows react-router's Link component to accept relative paths.
- Host: GitHub
- URL: https://github.com/donavon/react-router-relative-link
- Owner: donavon
- License: mit
- Created: 2016-06-24T10:42:52.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-01-16T00:39:52.000Z (over 5 years ago)
- Last Synced: 2025-03-17T19:50:31.718Z (7 months ago)
- Language: JavaScript
- Size: 46.9 KB
- Stars: 19
- Watchers: 2
- Forks: 6
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-router-relative-link
[](https://travis-ci.org/donavon/react-router-relative-link)
TL;DR
* A wrapper around react-router's `` and `` 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:
```js
import { Link } from "react-router-dom";
```
with the following and you're good to go!
```js
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.
```js
import { Link } from "react-router-relative-link";
export default class MyZoo extends React.Component {
render() {
return (
Welcome to the Lions Den at /zoo/lions
Back to the Zoo Entrance
Visit the Giraffes
Visit the Monkeys
Visit the Mountain Lions
);
}
}
```
`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](https://travis-ci.org/donavon/react-router-relative-link?branch=master) here.
You can also see it running live on
[this CodeSandbox](https://codesandbox.io/s/pkpw96w4nq).