reactjs中的重定向

Question

我有一个问题，我不能解决它一段时间。我有mvc应用程序，将在成功登录后呈现登录页面，我必须重定向到特定页面。

登录认证是由Api控制器完成的，它会给我一个成功认证的json位。我有一个关于如何在成功登录时进行重定向的问题。我正在使用ecmascript 5规格。我没有继承布局在我的登录表单和所有的组件和路由都在脚本中注册的布局页面。这个登录是一种临时页面，下面是登录的jsx代码。如能及时帮助，不胜感激

var MyInput = React.createClass({
//onchange event
handleChange: function (e) {
    this.props.onChange(e.target.value);
    $("#diverror span").removeClass('alert');
    $("#diverror span").removeClass('alert-danger');
},
componentDidMount: function () {
    if (this.props.onComponentMounted) {
        this.props.onComponentMounted(this);//register this input in the           form
    }
},    
render: function () {
    var inputField;
        inputField = <input type={this.props.type} value={this.props.value} ref={this.props.name} name={this.props.name}
        className='form-control'  onChange={this.handleChange} />            
    return (
            <div className="form-group">
                <label htmlFor={this.props.htmlFor}>{this.props.label}</label>
    {inputField}
</div>
        );
}

});

var Router = ReactRouter;
var Route = ReactRouter.Route;
var Routes = ReactRouter.Routes;
var Navigation = ReactRouter.Navigation;
var History = ReactRouter.History;
var LoginForm = React.createClass({
mixins: [History],
mixins: [Navigation],
//get initial state enent
getInitialState: function () {
    return {
        EnterpriseId: '',
        Password: 'ALWTempReplatform',
    }
},
//handle change full name
onChangeEnterpriseId: function (value) {
    this.setState({
        EnterpriseId: value
    });
},
//handle chnage email
onChangePassword: function (value) {
    this.setState({
        Password: value
    });
},
// submit function
handleSubmit: function (e) {
    e.preventDefault();
        enterpriseId = this.state.EnterpriseId;
        this.serverRequest = $.ajax({
            //url: this.props.urlPost,
            url: '/api/LoginApi/Login',
            dataType: 'json',
            cache: false,
            data: enterpriseId,
            data: { enterpriseId: enterpriseId },
            success: function (data) {
                //Will clear form here
                this.setState({
                    EnterpriseId: '',
                    Password:''
                });
                if (data == 0)
                {
                    history.pushState({}, '', '/')
                    window.location.reload()
                }
                else
                {
                    $("#diverror span").text("Access Denied");
                    $("#diverror span").addClass('alert');
                    $("#diverror span").addClass('alert-danger');
                }
            }.bind(this),
            error: function (e) {
                console.log(e);
                //alert('Error! Please try again');
            }
        });
},
render : function(){
    //Render form 
    return(
        <form name="loginForm" noValidate onSubmit={this.handleSubmit}>
            <div className="container">
                <div className="row">
                       <div className="col-md-3"></div>
            <div className="col-md-6 divformbtncontainer">
                <div className="formcontroldiv">
            <MyInput type={'text'} value={this.state.EnterpriseId} label=  {'Enterprise Id'} name={'EnterpriseId'} htmlFor={'EnterpriseId'}
                     onChange={this.onChangeEnterpriseId}   />
            <MyInput type={'password'} value={this.state.Password} label={'Password'} name={'Password'} htmlFor={'Password'} 
                     onChange={this.onChangePassword}   />
     <button type="submit" className="btn btn-primary btn-signin">SIGN IN</button>
                </div>
            </div>
                    <div className="col-md-3"></div>
                </div>
                <div className="row">
                      <div className="col-md-3"></div>
                       <div id="diverror" className="col-md-6 error">
                           <span></span>
                       </div>
                    <div className="col-md-3"></div>
                </div>
            </div>

</form>
    );
}
});
//Render react component into the page
ReactDOM.render(<LoginForm />, document.getElementById('divLoginForm'));

Answer 1

所以基本上你只需通过上下文将路由器添加到类中，例如:

...
contextTypes: {
  router: React.PropTypes.object.isRequired  
}
...

然后如果条件正确

if (successCondition) {
  this.context.router.push('stateName');
}

你使用路由器重定向到一个新的状态。

希望对你有帮助。

---

var React = React; // <-- add Reach to the application
var Router = ReactRouter;
var Route = ReactRouter.Route;
var Routes = ReactRouter.Routes;
var Navigation = ReactRouter.Navigation;
var History = ReactRouter.History;
var LoginForm = React.createClass({
mixins: [History],
mixins: [Navigation],
// --> Add the router into the context
contextTypes: {
  router: React.PropTypes.object.isRequired  
}
...
                if (data == 0)
                {
                    this.context.router.push('stateName'); // --> push the new state if successful
                }
                else
...

我已经将必要的部分添加到您提供的示例中。我注意到你没有定义React，或者可能是将比特添加到错误的地方的问题。