Перенаправление в реакции

Question

У меня есть проблема, с которой я не мог решить ее какое-то время. У меня есть приложение mvc, которое будет отображать страницу входа при успешном входе в систему. Мне нужно перенаправить на определенную страницу.

Аутентификация по аутентификации выполняется контроллером Api, который даст мне бит json при успешной аутентификации. У меня есть вопрос, как сделать перенаправление при успешном входе в систему. Я использую спецификации ecmascript 5. Я не унаследовал макет в моей форме входа и все компоненты и маршруты в сценариях, зарегистрированных в макете page.This логина является своим родом временной страницы и ниже код JSX для login.Timely помощи будет оценен

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

использовать маршрутизатор для перенаправления новое государство.

Надеюсь, это поможет.

---

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 или, может быть, это проблема с добавлением битов в неправильные места. Надеюсь это поможет.