react-relative-routes
v0.0.3
Published
[![npm version](https://badge.fury.io/js/react-relative-routes.svg)](https://badge.fury.io/js/react-relative-routes) [![Build Status](https://travis-ci.org/xmazu/react-relative-routes.svg?branch=master)](https://travis-ci.org/xmazu/react-relative-routes)
Downloads
13
Maintainers
Readme
react-relative-routes
A wrapper around react-router components to allow easy way of routes configuration.
Features
- Unopinionated routes configuration with well know path strings
- Wrappers around the react-router components to support patterns
- Well tested library
Installation
yarn add react-relative-routes
or
npm install react-relative-routes --save
Basic usage
Configure routes
import { PathPattern } from 'react-relative-routes';
const BASE_PATTERN = PathPattern.from('/');
const ABOUT_PATTERN = BASE_PATTERN.extend('/about');
const USER_PROFILE_PATTERN = BASE_PATTERN.extend('/user/:id');
Declare routes switch
import { RelativeSwitch } from 'react-relative-routes';
const Dashboard = () => (
<RelativeSwitch>
<RelativeRoute pattern={BASE_PATTERN} component={Home} exact />
<RelativeRoute pattern={ABOUT_PATTERN} component={About} exact />
<RelativeRoute pattern={USER_PROFILE_PATTERN} component={User} exact />
</RelativeSwitch>
);
Use RelativeLink and RelativeNavLink
import { RelativeLink, RelativeNavLink } from 'react-relative-routes';
const Links = () => (
<div>
<RelativeNavLink activeClassName="active" pattern={ABOUT_PATTERN}>
About
</RelativeNavLink>
<RelativeLink pattern={USER_PROFILE_PATTERN} params={{ id: 5 }}>
Go to user
</RelativeLink>
</div>
);
FAQ
Why custom <RelativeSwitch />
instead of react-router's Switch?
<Switch />
does not work with custom <Route />
components. Since we need to use
custom props for passing the pattern there is a need to use <RelativeLink />
or <RelativeNavLink />
.
Typings
If you are using TypeScript, you don't have to install typings - they are provided in npm package.
License
MIT