title: Redirect router on after login
body: <p>I am trying to figure out how to redirect my react app to proper page after it has been authenticated through the login. </p>
  
  <p>Here is my App.js file with the routed (without imports):</p>
  
  <pre><code>ReactDOM.render((
  &lt;Provider store={store}&gt;
      &lt;Router history={history}&gt;
          &lt;Switch&gt;
              &lt;PrivateRoute path="/test" component={Test} /&gt;
              &lt;Route path="/login" component={Login}  /&gt;
              &lt;PrivateRoute path="/" render={() =&gt; &lt;h1&gt;Welcome&lt;/h1&gt;} /&gt;
          &lt;/Switch&gt;
      &lt;/Router&gt;
  &lt;/Provider&gt;
  ), document.getElementById('root'));
  </code></pre>
  
  <p>I am using PrivateRoute component to make sure private routes get authenticated:</p>
  
  <pre><code>class PrivateRoute extends Route {
  render() {
      const { component: Component, isAuthenticated } = this.props;
  
      let propsCopy = Object.assign({}, this.props);
      delete propsCopy.component;
      delete propsCopy.isAuthenticated;
      return (
          isAuthenticated
          ? &lt;Component {...propsCopy} /&gt;
          : &lt;Redirect to={{
              pathname: LOGIN_PATH,
              state: { from: this.props.location }
          }} /&gt;
      );
  }
  }
  
  /**
   * Maps properties from Redux store to this component.
   * @param {Object} state Redux object
   * @return {Object} mapper properties
   */
  function mapStateToProps(state) {
  // pull out auth element from Redux store state
  const { auth } = state;
  // extract authenticated element from auth object
  const { isAuthenticated } = auth;
  
  return {
      isAuthenticated
  }
  }
  
  export default connect(mapStateToProps)(PrivateRoute);
  </code></pre>
  
  <p>My Login component that get redirected to (simplified for the sake of the example:</p>
  
  <pre><code>class LoginForm extends Component {
  
      constructor() {
          super();
  
  
          this.state = {
              email: '',
              password: '',
          }
  
          this.handleFormSubmit = this.handleFormSubmit.bind(this);
  
  
      }
  
  
      handleFormSubmit(event) {
          //event.preventDefault();
  
          const validation = this.validator.validate(this.state);
          this.setState({ validation });
          this.submitted = true;
  
          if (validation.isValid) {
              // submit form here
              this.props.loginUser({
                      email: this.state.email,
                      password: this.state.password
                  });
          }
      }
  
  
      render() {
  
          return (
  
              // My login FROM code here
          )
  
      }
  }
  
  function mapStateToProps(state) {
      return {
          isFetching: state.auth.isFetching,
          loginError: state.auth.loginError,
          isAuthenticated: state.auth.isAuthenticated
      };
  }
  
  function mapDispatchToProps(dispatch, props, state) {
      return {
          loginUser: (credentials) =&gt; {
              dispatch(loginUser(credentials));
          },
      };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
  </code></pre>
  
  <p>Right now it works where it redirects to the <code>LoginForm</code> component if <code>isAuthenticated</code> is false. I can submit the login form to my login service and receive a success response and set <code>isAuthenticated</code>. </p>
  
  <p>My question is how to I redirect to the original route? Where is redirection normally done? I'm assuming it's never done in the reducer so it would have to be done in the <code>LoginForm</code> component right? </p>
  
  <p>I know there are a lot of resources discuss this whole login flow but I can't find one that deals with this issue(which surprised me). Everyone redirects to a specific page ('/', '/home' etc) but how do i capture and redirect to the original route.  </p>