private route in react js simple example
Example 1: private route in react js
import React from 'react';
import {
BrowserRouter,
Route,
Switch,
Redirect
} from 'react-router-dom';
import decode from 'jwt-decode';
import Home from './Home';
import Register from './Register';
import Login from './Login';
import PrivateComponent1 from './PrivateComponent1';
import PrivateComponent2 from './PrivateComponent2';
const isAuthenticated = () => {
const token = localStorage.getItem('token');
try {
if(token){
return true;
}
else{
return false;
}
} catch (error) {
return false;
}
}
function PrivateRoute({ component: Component, ...rest }) {
return (
<Route
{...rest}
render={props =>
isAuthenticated() ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
}}
/>
)
}
/>
);
}
export default () => (
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/register" exact component={Register}/>
<Route path="/login" exact component={Login}/>
<PrivateRoute path="/private1/:id?" exact component={PrivateComponent1}/>
<PrivateRoute path="/private2" exact component={PrivateComponent2}/>
</Switch>
</BrowserRouter>
);
Example 2: private routes in react
import React from 'react'
import {Route, Redirect} from 'react-router-dom'
const PrivateRoute = ({
component: Component,
isAuthenticated,
userLevel,
...rest
}) => (
<Route {...rest} component={(props)=>
isAuthenticated ? (
<Component {...props} />
):(
<Redirect to="/login" />
)
} />
)
export default PrivateRoute