Package Exports

react-router-with-props

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-router-with-props) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-router-with-props

Extra routes for react-router-dom.

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, but you can pass props to it like to any other component. Any one can access it.

import { Route } from "react-router-dom";
import { PropsRoute } from "react-router-with-props";

<Route path="/news">
    <PropsRoute exact path="/" component={Title} text="Hello world!" />
</Route>

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.

import { Route } from "react-router-dom";
import { PublicRoute } from "react-router-with-props";

<Route path="/news">
    <PublicRoute exact path="/public" authed={false} redirectTo="/admin" component={Title} text="This route is for unauthed users"/>
</Route>

And this one will redirect them to '/admin' route.

import { Route } from "react-router-dom";
import { PublicRoute } from "react-router-with-props";

<Route path="/news">
    <PublicRoute exact path="/public" authed={true} redirectTo="/admin" component={Title} text="This route is for unauthed users"/>
</Route>

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.

import { Route } from "react-router-dom";
import { PrivateRoute } from "react-router-with-props";

<Route path="/news">
    <PrivateRoute exact path="/private" authed={true} redirectTo="/login" component={Title} text="This is a private route"/>
</Route>

And this one will call redirect them to '/login' route.

import { Route } from "react-router-dom";
import { PrivateRoute } from "react-router-with-props";

<Route path="/news">
    <PrivateRoute exact path="/private" authed={false} redirectTo="/login" component={Title} text="This is a private route"/>
</Route>