naM ,sevitcepsreP weN

    react-router-with-props

    2.0.1 • Public • Published

    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 exact path="/">
    	<PropsRoute 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 exact path="/public">
    	<PublicRoute 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 exact path="/public">
    	<PublicRoute 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 exact path="/private">
    	<PrivateRoute 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 exact path="/private">
    	<PrivateRoute authed={false} redirectTo="/login" component={Title} text="This is a private route"/>
    </Route>

    Install

    npm i react-router-with-props

    DownloadsWeekly Downloads

    1,348

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    9.54 kB

    Total Files

    9

    Last publish

    Collaborators

    • gcbenlloch