https://github.com/gcbenlloch/react-router-with-props
Custom routes for react router dom
https://github.com/gcbenlloch/react-router-with-props
react react-router-dom react-router-v4
Last synced: 3 months ago
JSON representation
Custom routes for react router dom
- Host: GitHub
- URL: https://github.com/gcbenlloch/react-router-with-props
- Owner: GCBenlloch
- License: mit
- Created: 2017-10-02T16:38:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-27T08:51:05.000Z (about 7 years ago)
- Last Synced: 2024-10-15T04:33:17.438Z (9 months ago)
- Topics: react, react-router-dom, react-router-v4
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-router-with-props
- Size: 36.1 KB
- Stars: 24
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-router-with-props
Extra routes for [react-router-dom](https://github.com/ReactTraining/react-router).
### Install
Install it
```
npm i -S react-router-with-props
```
and import it in your file
```
import { PropsRoute, PublicRoute, PrivateRoute } from 'react-router-with-props';
```
### Route types
* *PropsRoute* - Default route to which you can pass props.
* *PublicRoute* - It prevents the access to auth users and you can pass props to it.
* *PrivateRoute* - It prevents the access to unauth users and you can pass props to it.
### Props Route
It's the [basic route](https://reacttraining.com/react-router/web/example/basic), but you can pass props to it like to any other component.
**Any one can access it.**
```js
```
### Public Route
It requires two extra props.
| Prop | Type | |
|---|---|---|
| authed | boolean | If the user is authed or not |
| redirectTo | string | route to redirect if necessary |
**Only unauthed users can access it.**
The next exemple will call the Title component and will pass to it the text prop.
```js
```
And this one will call redirect them to '/admin' route.
```js
```
### Private Route
It requires two extra props.
| Prop | Type |---|
| ------ | ------ | ------ |
| authed | boolean | If the user is authed or not |
| redirectTo | string | route to redirect if necessary |
**Only authed users can access it.**
The next exemple will call the Title component and will pass to it the text prop.
```js
```
And this one will call redirect them to '/login' route.
```js
```