PrivateRoute not working in reactjs react-router-dom
try change library to react-cookie
;
let PrivateRoute = ({ component: Component, cookies, ...rest }) => (
<Route
{...rest}
render={props =>
cookies.get("name") ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
https://codesandbox.io/s/015k0jl0ql
Here is how I handle my private routes, maybe it will help you also. I have protectedRoutes
as an array with the routes. you can fit them as you like.
const routes = [
{
path: '/login', exact: true, name: 'Login', component: Login,
},
];
const protectedRoutes = [
{
path: '/admin', exact: true, name: 'Admin', component: Admin,
},
];
<Switch>
{routes.map((route, idx) => (route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
<route.component {...props} />
)}
/>
)
: (null)))}
{protectedRoutes.map((route, idx) => (route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
isAuth
? <route.component {...props} />
: <Redirect to="/login" />
)}
/>
)
: (null)))}
</Switch>
LE: added full example based on the original code
import React, { Component } from 'react';
import { Route, Redirect, Switch, BrowserRouter as Router } from 'react-router-dom';
import Dashboard from '../view/Dashboard/Dashboard';
import Login from '../view/Login/Login';
import Admin from '../view/UserManagement/Admin';
import cookie from 'react-cookies';
const routes = [
{
path: '/login', exact: true, name: 'Login', component: Login,
},
];
const protectedRoutes = [
{
path: '/', exact: true, name: 'Dashboard', component: Dashboard,
},
{
path: '/AdminManagement', exact: true, name: 'Admin', component: Admin,
},
];
class MainPanel extends Component {
constructor(props) {
super(props);
this.state = {
isAuthed: cookie.load('token'),
},
};
render() {
const { isAuthed } = this.state;
return (
<div style={{ direction: direction }}>
<Router>
<Switch>
{routes.map((route, idx) => (route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
<route.component {...props} />
)}
/>
)
: (null)))}
{protectedRoutes.map((route, idx) => (route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
isAuth
? <route.component {...props} />
: <Redirect to="/login" />
)}
/>
)
: (null)))}
</Switch>
</Router>
</div>
)
}
}
export default withNamespaces('common')(MainPanel);
The PrivateRoute
component that you have is correct, You however only need to re-order your Routes
for them to work correctly. /AdminManagement
route should come before /
since Switch renders the first matching Route and a Route path
will also match its prefix path
class MainPanel extends Component {
render() {
return (
<div style={{ direction: direction }}>
<Router>
<Switch>
<Route path="/login" component={Login}/>
<PrivateRoute path="/AdminManagement" component={Admin} />
<PrivateRoute path="/" component={Dashboard} />
</Switch>
</Router>
</div>
)
}
}
export default withNamespaces('common') (MainPanel);
Working demo