issue with Redirect To React Link

34 Views Asked by At

Below is my code of a functional component in react, where I am setting up the route based on the userLoggedIn status.

let routes;

  if (user.loggedIn === true) {
    routes = (
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/UserProfiles" component={UserProfiles} />
        <Route path="/EditProfile/" component={EditUserProfile} />
        <Redirect to="/" />
      </Switch>      
    )
  }
  else{
    routes = (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/Signup" component={SignUp} />
      <Redirect to="/" />
    </Switch> 
    )
  }

In the return function of my component, I have included this route as:

 return (    
        ...
        {routes}   
        ...    
  );

Everything is working fine, the only issue I am facing is when the user is loggedIn and navigates to the urls: 'localhost:3000/UserProfiles' or, 'localhost:3000/EditProfile/' by directly entering in the browser. They are redirected to Home component due to <Redirect to="/" />. I don't understand why Redirect is not working for the valid paths.

0

There are 0 best solutions below