title: Redirect on Login - React.js
body: <p>I am trying to do a simple Redirect with React Router after my user successfully logs in (inside Login.js), and prevent the user from revisiting the login page (inside index.js). </p>
  
  <p>In Login.js, I have <code>onSubmit={this.handleSubmit}</code> within the login button tag, and <code>handleSubmit(e)</code> function to Redirect. I have tried a few other solutions online, but I think my understanding on the usage of the <code>&lt;Redirect/&gt;</code> component is wrong. </p>
  
  <p>In index.js, I have a conditional that tests if the user is signed in, or not signed in, and (poorly) alerts the user on why they can't visit the desired page. I saw this in a Youtube video, but not sure if it's the best way to get the desired effect.</p>
  
  <p>Currently, when I log in successfully, the alert <code>You can't login if you are logged in!</code> is set off, but I obviously don't want the alert going off right after a successful login, I want the Redirect to trigger first. If I swap the two in the parenthesis, React throws an error.</p>
  
  <p>How do I get the Redirect to trigger right after a successful login, but not send the alert <code>You can't login if you are logged in!</code>?</p>
  
  <p><strong>Login.js Component</strong>:</p>
  
  <pre><code>import React, { Component } from 'react';
  import fire from '../config/Fire.js';
  import { Link, Redirect } from 'react-router-dom';
  import PasswordMask from 'react-password-mask';
  
  export default class Login extends Component {
      constructor(props) {
          super(props);
          this.login = this.login.bind(this);
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
          this.signup = this.signup.bind(this);
          this.state = {
            email: '',
            password: ''
          };
        }
  
      handleChange(e) {
          this.setState({ [e.target.name]: e.target.value });
      }
  
      handleSubmit(e) {
          e.preventDefault();
          &lt;Redirect to="/ticket-list"/&gt;;
      }
  
      login(e) {
          e.preventDefault();
          fire.auth().signInWithEmailAndPassword(this.state.email, this.state.password).catch((error) =&gt; {
              alert(error);
              });
      }
  
      signup(e){
          e.preventDefault();
          fire.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).catch((error) =&gt; {
              alert(error);
              })
      }
  
      render() {
          return (
          &lt;div className="m-container"&gt;
              &lt;h1&gt;Login&lt;/h1&gt;
              &lt;hr/&gt;
              &lt;div className="m-container"&gt;
                  &lt;form onSubmit={this.submitForm}&gt;
                  &lt;div&gt;
                      &lt;label for="exampleInputEmail1"&gt;Email address: &lt;/label&gt;
                      &lt;br/&gt;
                      &lt;input 
                      value={this.state.email} 
                      onChange={this.handleChange} 
                      type="text" 
                      name="email" 
                      id="exampleInputEmail1" 
                      placeholder="you@email.com" /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;label for="exampleInputPassword1"&gt;Password: &lt;/label&gt;
                      &lt;br/&gt;
                      {/* Margin issue when showing and hiding password */}
                      &lt;PasswordMask 
                      value={this.state.password} 
                      onChange={this.handleChange} 
                      type="password" 
                      name="password" 
                      id="exampleInputPassword1" 
                      placeholder="**********"
                       /&gt;
                  &lt;/div&gt;
                  &lt;br/&gt;
                  &lt;button 
                      type="submit" 
                      className="button" 
                      onClick={this.login}
                      onSubmit={this.handleSubmit}&gt;Login&lt;/button&gt;
                  &amp;nbsp;
                  &lt;Link className="button-inv" to="/register"&gt;Register&lt;/Link&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>index.js Component</strong>:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Route, Switch, Redirect } from 'react-router-dom';
  
  import Home from './Home';
  import Technician from './Technician';
  import About from './About';
  import Register from './Register';
  import Login from './Login';
  import TicketList from './TicketList';
  
  export default class Routes extends Component {
  
      render() {
          return (
          &lt;Switch&gt;
              &lt;Route path="/" exact component={Home} /&gt;
              &lt;Route path="/technician" exact component={Technician} /&gt;
              &lt;Route path="/about" exact component={About} /&gt;
              &lt;Route path="/register" exact render={()=&gt;(
                  this.props.user ? (alert("You can't register if you are logged in!"), (&lt;Redirect to="/"/&gt;)) : (&lt;Register/&gt;)
              )} /&gt;
              &lt;Route path="/login" exact render={()=&gt;(
                  this.props.user ? (alert("You can't login if you are logged in!"), (&lt;Redirect to="/ticket-list"/&gt;)) : (&lt;Login/&gt;)
              )} /&gt;
              &lt;Route path="/ticket-list" exact render={()=&gt;(
                  this.props.user ? (&lt;TicketList/&gt;) : (alert("You must log in to visit this page."), (&lt;Redirect to="/login"/&gt;))
              )} /&gt;
          &lt;/Switch&gt;
          );
      }
  };
  </code></pre>
  
  <p><strong>App.js</strong>:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { BrowserRouter } from 'react-router-dom';
  import Routes from './routes';
  import fire from './config/Fire.js';
  
  // CSS
  import './assets/css/App.css';
  import './assets/css/Header.css';
  import './assets/css/Footer.css';
  // Components
  import Header from './components/Header';
  import Footer from './components/Footer';
  
  class App extends Component {
    constructor(props){
      super(props);
      this.state = {
        user:{},
      }
    }
  
    //When component is done rendering for the first time
    componentDidMount(){
      this.authListener();
    }
  
    // If user logs in (if) or out (else) this is called
    authListener() {
      fire.auth().onAuthStateChanged((user) =&gt; {
        //console.log(user);
        if (user) {
          this.setState({ user });
        } else {
          this.setState({ user: null });
        }
      });
    }
  
  
    render() {
      return (
        &lt;BrowserRouter&gt;
          &lt;div className="wrapper"&gt;
            &lt;Header user={this.state.user} /&gt;
            &lt;div className="body"&gt;
              &lt;Routes user={this.state.user} /&gt;
            &lt;/div&gt;
            &lt;Footer /&gt;
          &lt;/div&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  
  export default App;
  </code></pre>