注册后重定向[react，react-router，alt]

Question

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:

SignUpForm.js

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 (
      <div>

         <form className="SignUpForm col-md-4" onSubmit={this.handleSubmit.bind(this)}>
          <span className='help-block'>{this.state.helpBlock}</span>
          <div className={'form-group ' + this.state.firstNameValidationState}>
            <input type="text" placeholder="First Name" ref="first_name" className="form-control" value={this.state.first_name}  onChange={SignUpFormActions.updateFirstName} required/>
          </div>
          ...
          <input type="submit" value="Sign Up" className="btn btn-primary"/>
        </form>
      </div>
    );
  }
}

export default SignUpForm;

SignUpFormActions.js

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) => {
        this.actions.addUserSuccess(data.message);
      })
      .fail((jqXhr) => {
        this.actions.addUserFail(jqXhr.responseJSON.error.message);
  });
 }

SignUpFormStore.js

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);  

Routes.js

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 (
  <Route handler={App}>
    <Route path='/' handler={Home} />
    <Route path='/login' handler={LoginForm} />
    <Route path='/signup' handler={SignUpForm} />
    <Route path='/success' handler={Success} />
  </Route>
);

Answer 1

You can actually just do the redirect in your ajax call:

$.ajax({
      type: 'POST',
      url: 'https://app.herokuapp.com/users',
      crossDomain: true,
      dataType: 'json',
      data: data
    })
      .done((data) => {
       window.location.href = "url redirect to success page";
       this.actions.addUserSuccess(data.message);
      })
      .fail((jqXhr) => {
        this.actions.addUserFail(jqXhr.responseJSON.error.message);
  });

You can also do this with React-router using the History Mixin :

this.history.pushState(null, "/success");