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，或者将位添加到错误的位置可能是个问题。希望这会有所帮助。