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
npm install --save react-router-with-propsRoute 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.
<PropsRoute exact path="/" component={Title} text="Hello world!" />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.
<PublicRoute exact path="/public" authed={false} redirectTo="/admin" component={Title} text="This route is for unauthed users"/>And this one will call redirect them to '/admin' route.
<PublicRoute exact path="/public" authed={true} redirectTo="/admin" component={Title} text="This route is for unauthed users"/>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.
<PrivateRoute exact path="/private" authed={true} redirectTo="/login" component={Title} text="This is a private route"/>And this one will call redirect them to '/login' route.
<PrivateRoute exact path="/private" authed={false} redirectTo="/login" component={Title} text="This is a private route"/>