CODEWITHSUNDEEP
javascriptreactjs
user15334378
user15334378

Reputation:

React: private route not navigating

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!

Upvotes: 0

Views: 276

Answers (2)

user15334378
user15334378

Reputation:

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")}

Upvotes: 1

Asgar
Asgar

Reputation: 439

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;

Upvotes: 0

Related Questions