i'm trying to implement PrivateRoute but it never redirects.
i tried everything even commenting returning <Component /> part but it still return the component !!!!
my PrivateRouter component:
i'm trying to get {isLoggedIn} from redux state
import React, { useEffect } from "react";
import { Route, Redirect } from "react-router-dom";
import { useSelector } from "react-redux";
export default function PrivateRoute({
component: Component,
render,
accessType,
...rest
}) {
const auth = useSelector((state) => state.auth);
const { last_role_type: userType } = useSelector((state) => state.user);
useEffect(() => {
console.log("router auth: ", auth);
}, [auth]);
return (
<Route
{...rest}
render={(props) =>
auth.isLoggedIn ? (
Component ? (
<Component {...props} />
) : (
render(props)
)
) : (
<Redirect to="/login" />
)
}
/>
);
}
my router code:
<Router>
<Provider store={store}>
<SnackbarProvider maxSnack={4} hideIconVariant={false}>
<Header>
<CustomSnackbar />
<Switch>
<Route path="/register">
<Register />
</Route>
<Route path="/login">
<Login />
</Route>
<PrivateRoute path="/assessment/create">
<AssessmentForm />
</PrivateRoute>
<PrivateRoute path="/assessment">
<Assessment />
</PrivateRoute>
<Route path="/" exact>
<Home />
</Route>
<Route path="/not-found">
<NotFound />
</Route>
<Redirect to="/not-found" />
</Switch>
</Header>
</SnackbarProvider>
</Provider>
</Router>
even after commenting it still is returning the component instead of redirecting:
return (
<Route
{...rest}
render={(props) =>
auth.isLoggedIn ? (
// Component ? (
<Component {...props} />
// ) : (
// render(props)
// )
) : (
<Redirect to="/enterPhone" />
)
}
/>
);

