Реагировать на перенаправление и передачу информации на другую страницу

Question

У меня есть реакция с реактивным маршрутизатором для ввоза. Я пытаюсь создать форму, которая обновляет некоторые данные. После отправки данные отправляются на сервер, хотя ajax-запрос и в случае ответа ajex «ОК», чем пользователь должен быть перенаправлен на другую страницу (в моем случае URL-адрес в маршрутизаторе-ответчике равен /carwash), а информация о succesfull update должна будет отображаться на странице разграничения.

Я пытался сделать это на 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"), результат был успешным, но я не знаю, как сообщать страницу назначения, данные были обновлены succesfull.

Можете ли вы объяснить мне, что является лучшим способом перенаправления в реакции и как его использовать? И что не менее важно, как указать страницу, где пользователь будет перенаправлен на то, что данные были обновлены успешно?

Мой код имеет следующий вид:

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