title: Uncaught Invariant Violation : Maximum update depth exceeded
body: <p>This can happen when a component repeatedly calls <code>setState</code> inside <code>componentWillUpdate</code> or <code>componentDidUpdate</code>. React limits the number of nested updates to prevent infinite loops.</p>
  
  <p>I cannot route to the <code>authenticationRoute</code> destination because of this error. </p>
  
  <p><strong>Console Output:</strong></p>
  
  <blockquote>
    <p>index.js:1446 The above error occurred in the  component:</p>
  
  <pre><code>in Redirect (at Auth.jsx:101)
  in div (at Auth.jsx:116)
  in Auth (created by Context.Consumer)
  in Connect(Auth) (created by Route)
  in Route (at App.js:27)
  in Switch (at App.js:26)
  in div (at App.js:46)
  in App (created by Context.Consumer)
  in Connect(App) (created by Route)
  in Route (created by withRouter(Connect(App)))
  in withRouter(Connect(App)) (at src/index.js:28)
  in Router (created by BrowserRouter)
  in BrowserRouter (at src/index.js:27)
  in Provider (at src/index.js:26)
  </code></pre>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import Input from '../../components/Input/input';
  import Button from '../../components/Button/button';
  import { connect } from 'react-redux';
  import { Redirect } from 'react-router-dom';
  import * as service from '../../services/AuthService';
  
   class Auth extends Component {
       state = {
          controls: {
              username: {
                 //..
              },
              password: {
                 //..
                  },
                  valid: false,
                  touched: false
              }
          }
      }
  
      componentDidMount () {
          if ( this.props.isAuthenticated &amp;&amp; this.props.authRedirectPath !== '/' ) {
              this.props.onSetAuthRedirectPath('/home');
          }
      }
  
  
      handleSubmit=(event)=&gt; {
          event.preventDefault();
          this.props.auth(this.state.controls.username.value,this.state.controls.password.value)
         
      }
      render() {
  
          let errorMessage = null;
          let button= button=&lt;Button btnType="Success"&gt;Login&lt;/Button&gt;
          let authRedirect = null;
          if (this.props.isAuthenticated) {
              **authRedirect = &lt;Redirect to={this.props.authRedirectPath}/&gt;** //line 101
          }
          return (
          &lt;div&gt;
              {authRedirect}
                          &lt;form onSubmit={this.handleSubmit}&gt;
                             {form}
                          {button}
                          &lt;/form&gt;
                
              &lt;/div&gt;
          )
      }
  }
  
  export default connect( mapStateToProps, mapDispatchToProps )( Auth );</code></pre>
  </div>
  </div>
  </p>