リアクションリダイレクトと別のページへの情報の転送

Question

私はリアクションルータを使ってナビゲートすることに反応しています。私はいくつかのデータを更新するフォームを作成しようとします。送信後、データはサーバーに送信されますが、ajax応答の場合は、ユーザーが別のページにリダイレクトする必要があるよりも「OK」です（私のケースでは、反応ルータのURLは/carwashです）。 distinationページに表示されます。

私は3つのdifferectの方法でこれを実行しようとしました：

1）this.props.history.push('/carwash')結果は例外だった：Uncaught TypeError: Cannot read property 'push' of undefined

2）browserHistory.push("/carwash")、結果はブラウザ内のリストが変更されましたですが、いずれかが存在しませんリダイレクト

3）絶対URLにリダイレクトすると反応：window.location.replace("/owner.html#/carwash")、結果は成功しましたが、私は、データが更新されたことを通知する方法をundestand undestandしていません。

リアクションでのリダイレクトとその使用方法について教えてください。そして、データが更新されたことをユーザがリダイレクトされるページをインフォームする方法はあまり重要ではないでしょうか？

私のコードは次のビューがあります。

import React from 'react'; 
import {Router} from 'react-router'; 
import Loading from './form/loading.jsx'; 

export default class EditCarWashForm extends React.Component{ 

static contextTypes = { 
    router: React.PropTypes.object.isRequired 
}; 

constructor(props) { 
    super(props); 
    this.state = { 
     name  : {value : constants.EMPTY_FIELD, isValid : false}, 
     address  : {value : constants.EMPTY_FIELD, isValid : true}, 
     isCarWashDownload : true 
    }; 
    this.handleSubmit = this.handleSubmit.bind(this); 
} 

handleSubmit(e) { 
    e.preventDefault(); 
    let carWashData = {some logic} 

    $.ajax({ 
     url: '/carwash/', 
     type: 'POST', 
     async: true, 
     cache: false, 
     contentType: 'application/json', 
     data: JSON.stringify(carWashData), 
     dataType: 'json', 
     success: function(data) { 
      if (data.message == 'Ok'){ 
       // browserHistory.push("/owner.html#/carwash") 
       this.props.history.push('/carwash'); 
       // window.location.replace("/owner.html#/carwash"); 
     } 
     }.bind(this), 
    }) 
}; 


render(){ 
    let data = <Loading/> 

    if (this.state.isCarWashDownload) { 
     data = 
      <form onSubmit={this.handleSubmit} id="addCarWashForm"> 
       <FormInputField 
        title="Name*:" 
        placeholder="Name" 
        name="name" 
        required={true} 
        maxLength={50} 
        defaultValue={this.state.name.value} 
       /> 

       <FormInputField 
        title="Adress:" 
        placeholder="Adress" 
        name="address" 
        maxLength={200} 
       /> 


       <div className="form-group"> 
        <div className="col-sm-offset-2 col-sm-10"> 
         <button type="submit">Update</button> 
        </div> 
       </div> 

      </form> 
    } 

    return (
     <div> 
      {data} 
     </div> 
    ) 

} 

}

Answer 1

このコードは、リダイレクトのために働いている：

を

// Somewhere like a Redux middleware or Flux action: 
import { browserHistory } from 'react-router' 

// Go to /some/path. 
browserHistory.push('/some/path') 

私の欠陥は、レンダリングを担当する主なコンポーネントにありました<Router>。私は（私の場合）以下の変更を加えた場合、リダイレクトが機能していることではないbrowserHistoryとしてではなくhashHistory

の観点

ReactDOM.render(
<Router history={hashHistory}> 
    <Route path="/" component={MyHeader}> 
     <IndexRoute component={Main}/> 
     <Route path="carwash" component={CarWashPage} /> 
     <Route path="carwashAdd" component={AddCarWashPage} /> 
     <Route path="carwashAdd/:carWashId" component={EditCarWashPage} /> 

    </Route> 
</Router>, 
destination 
); 

として歴史に言及し、次のコード持っていた：

hashHistory.push('/some/path'); 

Answer 2

ようbrowserHistoryインポートしてみてください。

// Somewhere like a Redux middleware or Flux action: 
import { browserHistory } from 'react-router' 

// Go to /some/path. 
browserHistory.push('/some/path') 

check here