Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Login router problem

See original GitHub issue

i want to route login page for opening page. How can make it ? i change router but return empty page. can you help me ?

    <HashRouter>
        <Switch>
          <Route exact path="/register" name="Register Page" component={Register} />
          <Route exact path="/404" name="Page 404" component={Page404} />
          <Route exact path="/500" name="Page 500" component={Page500} />
          <Route path="/home" name="Home" component={DefaultLayout} />
          <Route  path="/login" name="Login Page" component={Login} />
        </Switch>
      </HashRouter>

Issue Analytics

State:
Created 5 years ago
Comments:6

Top GitHub Comments

25reactions

jeff-nzcommented, Sep 25, 2018

Hi @aolmez ,

Are you making it required for people to login before they can see contents in DefaultLayout component ?

If so, here’s some code:

const isAuthenticated = () => {
  //write your condition here
  return false;
}


const UnauthenticatedRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    !isAuthenticated()
      ? <Component {...props} />
      : <Redirect to='/' />
  )} />
);


const AuthenticatedRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    isAuthenticated()
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
);


class App extends Component {
  render() {
    return (
        <HashRouter>
          <Switch>
            <UnauthenticatedRoute exact path="/login" name="Login Page" component={Login} />
            <Route exact path="/register" name="Register Page" component={Register} />
            <Route exact path="/404" name="Page 404" component={Page404} />
            <Route exact path="/500" name="Page 500" component={Page500} />
            <AuthenticatedRoute path="/" name="Home" component={DefaultLayout} />
          </Switch>
        </HashRouter>
    );
  }
}

I hope it helps.

1reaction

mitchbregscommented, Apr 22, 2020

Thanks so much for this! @jeff-nz - would you advise to make all the non protected Route become UnauthenticatedRoute as such in this scenario? To illustrate:

      <HashRouter>
          <React.Suspense fallback={loading()}>
            <Switch>
              <UnauthenticatedRoute exact path="/login" name="Login Page" component={Login} />
              <UnauthenticatedRoute exact path="/register" name="Register Page" component={Register} />
              <UnauthenticatedRoute exact path="/404" name="Page 404" component={Page404} />
              <UnauthenticatedRoute exact path="/500" name="Page 500" component={Page500} />
              <AuthenticatedRoute path="/" name="Home" component={DefaultLayout} />
            </Switch>
          </React.Suspense>
      </HashRouter>