how to implement react router protectedRoute with redux?

Viewed 90

i'm trying to implement PrivateRoute but it never redirects. i tried everything even commenting returning <Component /> part but it still return the component !!!!

this is redux state data after logging out

this is the data i logged inside my private route 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" />
         )
      }
    />
  );
0 Answers
Related