React-private-public-route NPM

React-Routing

Public and Private Routng with restricted functionality in React

Working demo available at

Code Example available at: Github

Installation

Using npm:

$ npm i react-private-public-route

Basic Usage

...
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
...
import { PublicRoute, PrivateRoute } from "react-private-public-route";
import Homepage from './Homepage';
import Restricted from './Restricted';
import Login from './Login';
...

function App() {
    return (
     ...
        <Router>
            <Switch>
              <PublicRoute exact path="/login" component={Login} />
                <PublicRoute
                exact
                restricted
                redirect="/homepage"
                path="/restricted"
                component={Restricted}
                />
                <PrivateRoute
                isAuthenticated={false}
                restricted
                redirect="/login"
                path="/homepage"
                component={Homepage}
                />
            </Switch>
        </Router>
     ...
    )
}

export default App

Public Route

Props	value Type	Defaut Value	isRequired	Description
restricted	bool	false	-	If set to true it will be redirected
component	funtion	-	yes	Component which needs to be rendered if not restricted
redirect	string	/	-	If restricted it will be redirected to this route

Private Route

Props	value Type	Defaut Value	isRequired	Description
restricted	bool	false	-	If set to true it will be redirected
component	funtion	-	yes	Component which needs to be rendered if not Restricted and Authenticated
redirect	string	/login	-	If restricted on not authenticated it will be redirected to this route
isAuthenticated	bool	false	-	To check whether route is Authenticated