反応中のリダイレクト

Question

私はしばらくの間解決できなかった問題があります。私は正常なログイン時に私は特定のページにリダイレクトする必要がログインページをレンダリングするmvcアプリケーションを持っています。

ログイン認証は、認証成功時にjsonビットを与えるApiコントローラによって行われます。成功したログイン時にリダイレクトを行う方法について質問があります。私はecmascript 5仕様を使用しています。私は自分のログインフォームでレイアウトを継承しておらず、すべてのコンポーネントとルートがスクリプトでレイアウトpage.Thisログインに登録されている種類の一時的なページで、以下のlogin.Timelyヘルプの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> 
     ); 
} 

を理解されるであろう

}）;その後、

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

と条件があなたにリダイレクトするようにルータを使用

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

正しいかどうか：だから、基本的にはあなただけの文脈を通じてクラスにルータを追加

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

、例えば新しい州。

これが役に立ちます。

---

UPDATE

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を定義していないか、間違った場所にビットを追加することに問題があるかもしれないことに気付きました。お役に立てれば。