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

Question

我正在使用React创建我的第一个应用程序并且遇到了一个我确定很容易解决但我无法弄清楚如何解决的问题。注册后，我无法让用户看到新的“成功”页面。 我认为重定向应该处于状态，但我似乎无法找到正确的调用。这就是我到目前为止所做的：

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

你实际上可以在你的ajax调用中进行重定向：

$.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);
  });

您也可以使用History Mixin：

使用React-router执行此操作

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