# 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 import { Route } from "react-router-dom"; import { PropsRoute } from "react-router-with-props"; ``` ### 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 import { Route } from "react-router-dom"; import { PublicRoute } from "react-router-with-props"; ``` And this one will redirect them to '/admin' route. ```js import { Route } from "react-router-dom"; import { PublicRoute } from "react-router-with-props"; ``` ### 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 import { Route } from "react-router-dom"; import { PrivateRoute } from "react-router-with-props"; ``` And this one will call redirect them to '/login' route. ```js import { Route } from "react-router-dom"; import { PrivateRoute } from "react-router-with-props"; ```

react-router-with-props

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past