Question

183

Redirect to login page in react router 4

rated 0 times [ 184] [ 1] / answers: 1 / hits: 16971 / 5 Years ago, tue, january 8, 2019, 12:00:00

I am new to react and still learning my way around. I am creating a single page app where the user is redirected to the login page if he is not logged in. React has a Redirect component and I am not sure how to use it.

Following is my app.js :-

import React, { Component } from 'react';

import { Route, Switch, Redirect } from 'react-router-dom';

import Login from './components/login/login.js'

import Protected from './components/protected/protected.js'



import './App.css';



class App extends Component {



  state = {

    loggedIn: false // user is not logged in

  };



  render() {



    return (

        <Switch>

          <Route path="/protected" component={Protected}/>

          <Route path="/login" component={Login}/>

        </Switch>

    );

  }

}



export default App;

In the above scenario, I want the user to be redirected to the /login page if the state loggedIn is false or else it should go to the /protected page.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

patienceannel

Add To Favorites

Follow

Total Points: 674

Total Questions: 101

Total Answers: 101

Location: Northern Mariana Islands

Member since Fri, Jan 15, 2021

3 Years ago

answered 6 Years ago margaritakristinak · Accepted Answer

I usually create a PrivateRoute component that checks if the user is logged in (via prop, redux, localstorage or something).

Something like:

const PrivateRoute = ({ isLoggedIn, ...props }) =>

  isLoggedIn

    ? <Route { ...props } />

    : <Redirect to=/login />

In the router I then use it for my, well, private routes :)

<Switch>

  <PrivateRoute isLoggedIn={ this.state.loggedIn } path=/protected component={Protected} />

  <Route path=/login component={Login}/>

</Switch>