Login router problem

[aolmez]

Hi

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>

[jeff-nz]

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.

[aolmez]

thanks for your answer jeff-nz <notifications@github.com>, 25 Eyl 2018 Sal, 11:05 tarihinde şunu yazdı:

…

Hi @aolmez <https://github.com/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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#113 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJNc7Pjpf6M_X7RppCD40J8GQH8Mgwzvks5ueePigaJpZM4Wg6wP> .

-- A.Kadir ÖLMEZ

[noeljoaquin30]

I tried that using above scenario but after click login didn't redirect to homepage, my laptop's memory keep increasing and the browser suddenly turn unresposive page

[MoradiGit]

<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 exact path="/login" name="Login Page" component={Login} />
      <Route path="/home" name="Home" component={DefaultLayout} />
    </Switch>
  </HashRouter>

its worked man

[mitchbregs]

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>

[arindamad]

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.

getting error in prop type

[DIBO237]

[UnauthenticatedRoute] is not a component. All component children of must be a or <React.Fragment>

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.

Hi gettting this error

[MHZarei]

I have same error, Redirect is removed from 'react-router-dom'.
https://stackoverflow.com/a/69408107/1490377