反应：私人路线不导航

Question

I am using a private route to navigate to a route after the user has logged in. However, I am facing an issue. I don't know why but my router is not transitioning to the desired route. Here's my code:

Routes.js

...
...
<PrivateRoute
  authenticated={localStorage.getItem("isAuthenticated")}
  path="/dashboard"
  component={DashBoard}
  exact
></PrivateRoute>

PrivateRoute.js

const PrivateRoute = ({ component: Component, authenticated, ...rest }) => (  
<Route
  {...rest}
  render={props =>
    authenticated ? (
      <Component {...rest} {...props} />
    ) : (
      <Redirect
        to={{
          pathname: '/',
          state: { from: props.location }
        }}
      />
    )
  }
/>
);

export default PrivateRoute;

Login.js

localStorage.setItem("isAuthenticated", true);
this.props.history.push('/dashboard');

Any help would be appreciated. Thanks!

Answer 1

Can you just try it?

PrivateRoute.js

const PrivateRoute = ({ component: Component, authenticated, ...rest }) => {
  console.log("authenticated",authenticated)//is it true or false?
  if (authenticated=="true")
    return (
      <Route {...rest}>
        {" "}
        <Component {...rest} {...props} />
      </Route>
    );
  else
    return (
      <Redirect
        to={{
          pathname: "/",
          state: { from: props.location },
        }}
      />
    );
};

export default PrivateRoute;

Answer 2

So, I found the solution.

authenticated={localStorage.getItem("isAuthenticated")}

the above was invoking the method at application bootstrap due to which I was having the value of null being stored in my authenticated variable so, I changed it to arrow function and passed the argument without invoking it like below:

authenticated={() => localStorage.getItem("isAuthenticated")}