title: Redirect after signup [react, react-router, alt]
body: <p>I'm creating my first application with React and have encountered an issue that I'm sure is easy to solve but I can't figure out how. I can't get the user to see a new "success" page after they signup. 
  I think the redirect should be in the state but I can't seem to find the right calls to make. This is what I have so far:</p>
  
  <h2>SignUpForm.js</h2>
  
  <pre><code>import React from 'react';
  import {Link} from 'react-router';
  import SignUpFormStore from '../stores/SignUpFormStore';
  import SignUpFormActions from '../actions/SignUpFormActions';
  
  class SignUpForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = SignUpFormStore.getState();
      this.onChange = this.onChange.bind(this);
    }
  
    componentDidMount() {
      SignUpFormStore.listen(this.onChange);
    }
  
    componentWillUnmount() {
      SignUpFormStore.unlisten(this.onChange);
    }
  
    onChange(state) {
      this.setState(state);
    }
  
    handleSubmit(e){
      e.preventDefault();
      var first_name = this.state.first_name;
      var last_name = this.state.last_name;
      var email = this.state.email;
      var phone = this.state.phone;
      var password = this.state.password;
      var passwordConfirmation = this.state.passwordConfirmation;
      var tos = this.state.tos;
  
      if (!first_name) {
        SignUpFormActions.invalidFirstName();
      };
  
      SignUpFormActions.addUser(
        first_name,
        last_name,
        email,
        phone,
        password,
        passwordConfirmation,
        tos
      );
     }
    render() {
      return (
        &lt;div&gt;
  
           &lt;form className="SignUpForm col-md-4" onSubmit={this.handleSubmit.bind(this)}&gt;
            &lt;span className='help-block'&gt;{this.state.helpBlock}&lt;/span&gt;
            &lt;div className={'form-group ' + this.state.firstNameValidationState}&gt;
              &lt;input type="text" placeholder="First Name" ref="first_name" className="form-control" value={this.state.first_name}  onChange={SignUpFormActions.updateFirstName} required/&gt;
            &lt;/div&gt;
            ...
            &lt;input type="submit" value="Sign Up" className="btn btn-primary"/&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default SignUpForm;
  </code></pre>
  
  <h2>SignUpFormActions.js</h2>
  
  <pre><code>import alt from '../alt';
  import {assign} from 'underscore';
  
  class SignUpFormActions {
    constructor() {
      this.generateActions(
          'addUserSuccess',
          'addUserFail',
          ...
      );
    }
  
    addUser(first_name, last_name, email, phone, password, passwordConfirmation, tos){
      var data = { 
          first_name: first_name,
          last_name: last_name,
          email: email,
          phone_number: phone,
          password: password,
          password_confirmation: passwordConfirmation,
          tos: tos
        };
  
      $.ajax({
        type: 'POST',
        url: 'https://app.herokuapp.com/users',
        crossDomain: true,
        dataType: 'json',
        data: data
      })
        .done((data) =&gt; {
          this.actions.addUserSuccess(data.message);
        })
        .fail((jqXhr) =&gt; {
          this.actions.addUserFail(jqXhr.responseJSON.error.message);
    });
   }
  </code></pre>
  
  <h2>SignUpFormStore.js</h2>
  
  <pre><code>import alt from '../alt';
  import SignUpFormActions from '../actions/SignUpFormActions';
  
  class SignUpFormStore {
    constructor() {
      this.bindActions(SignUpFormActions);
      this.first_name= "";
      ...
    }
  
    onAddUserSuccess(successMessage) {
      console.log('add user success!');
      //I think the user should be re-directed here
      //I have tried these two options but they don't work
      //Route.get().transitionTo('/success');
      //transition.redirect('success');
    }
    onAddUserFail(errorMessage){
      console.log('add user error! ' + errorMessage);
      this.helpBlock = errorMessage;
    }
    ...
  }
  
  export default alt.createStore(SignUpFormStore);  
  </code></pre>
  
  <h2>Routes.js</h2>
  
  <pre><code>import React from 'react';
  import {Route} from 'react-router';
  import App from './components/App';
  import Home from './components/Home';
  import LoginForm from './components/LoginForm';
  import SignUpForm from './components/SignUpForm';
  import Success from './components/Success';
  
  export default (
    &lt;Route handler={App}&gt;
      &lt;Route path='/' handler={Home} /&gt;
      &lt;Route path='/login' handler={LoginForm} /&gt;
      &lt;Route path='/signup' handler={SignUpForm} /&gt;
      &lt;Route path='/success' handler={Success} /&gt;
    &lt;/Route&gt;
  );
  </code></pre>