chuyển hướng từ hành động redux trong bộ định tuyến phản ứng v4

Question

Tôi đã sử dụng react-router v4 để định tuyến trong ứng dụng của mình. Trong trang chủ, có một biểu mẫu. Khi người dùng điền vào biểu mẫu và nhấn nút gửi, thì hành động được gửi đi (showResultofCar) và nó sẽ được chuyển hướng đến trang kết quả không phải là một đứa trẻ trong trang chủ thay vì đó là một trang khác với giao diện người dùng khác nhau từ trên xuống dưới.

Tôi cố gắng làm theo cách này nhưng hành động không cử chỉ định tuyến đã được chuyển nhưng cho thấy các trang web tương tự thay vì trang mới (kết quả)

index.js

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <ConnectedIntlProvider> 
     <Router> 
     <App /> 
     </Router> 
    </ConnectedIntlProvider> 
    </Provider> 
    , document.querySelector('.app')); 

app.js

render() { 
    return (
     <div className="container-fluid"> 
     <Nav 
      showModal={(e) => this.showModal(e)} 
      hideModal={() => this.hideModal()} 
      show={this.state.show} 
      onHide={() => this.hideModal()} 
     /> 
      <Banner /> 
      <Media /> 
      <Footer /> 
     </div> 
     ); 
} 

form.j s (nó là một thành phần con của biểu ngữ mà là một thành phần con của ứng dụng)

onSubmit = (e) => { 
    e.preventDefault(); 
    const originwithCountry = e.target.Origen.value; 
    const originwithCity = originwithCountry.split(', ')[0]; 
    const cityFrom = base64.encode(originwithCity); 
    const startDate = (new Date(e.target.startDate.value).getTime()/1000); 
    this.props.showResultofCar(cityFrom, cityTo, startDate); 
    this.context.router.transitionTo('/result'); 
    } 

render() { 
    const { focusedInput } = this.state; 
    const { intl } = this.props; 
    return (
    <div className="form-box text-center"> 
     <div className="container"> 
     <form className="form-inline" onSubmit={this.onSubmit}> 
      <div className="form-group"> 
      <Field 
       name='Origen' 
       component={renderGeoSuggestField} 
      /> 
      </div> 
      <div className="form-group"> 
      <Field 
       name="daterange" 
       onFocusChange={this.onFocusChange} 
      /> 
      </div> 
      <Link to="/result"> 
      <button type="submit" className="btn btn-default buscar"> 
      { intl.formatMessage({ id: 'buscar.text' })} 
      </button> 
     </Link> 
     </form> 
     </div> 
    </div> 
); 
} 

kết quả-parent.js

class ResultParent extends Component { 
    render() { 
    return (
     <div className="result-page"> 
     <Match pattern='/result' component={Result} /> 
     </div> 
    ); 
    } 
} 

result.js

class Result extends Component { 
render() { 
    return (
    <div className="result-page"> 
     <ResultNav /> 
     <Filtering /> 
     <Results /> 
    </div> 
); 
} 
} 

hành động/chỉ mục.js

export function showResultofCar(cityFrom, cityTo, date) { 
    return (dispatch) => { 
    dispatch({ type: 'CAR_FETCH_START' }); 
    const token = localStorage.getItem('token'); 
    console.log('date', date); 
    return axios.get(`${API_URL}/car/{"cityFrom":"${cityFrom}","cityTo":"${cityTo}","date":${date}}.json/null/${token}`) 
     .then((response) => { 
     console.log('response is', response); 
     dispatch({ type: 'CAR_FETCH_SUCCESS', payload: response.data }); 
     }) 
     .catch((err) => { 
     dispatch({ type: 'CAR_FETCH_FAILURE', payload: err }); 
     }); 
    }; 
} 

Cách của tôi không hoạt động. Làm thế nào tôi có thể chuyển hướng bằng cách sử dụng phản ứng router v4 bên trong hành động?

Ngoài ra tôi không muốn kết quả được hiển thị bên trong Thành phần ứng dụng (phụ huynh) vì trang kết quả sẽ hoàn toàn khác với tùy chọn thanh điều hướng, lọc và kết quả của riêng nó.

Lưu ý: Phản ứng Router v4 đã được sử dụng

Answer 1

Video này đã giúp tôi nắm bắt cách sử dụng các bộ định tuyến mới: http://remzolotykh.net/crud-with-redux-06-server-side-validation-and-record-creation-part-2/

Answer 2

Những gì bạn có thể làm là làm cho một handler chuyển hướng bên trong App của bạn .js:

constructor(props) { 
    super(props); 
    this.handleRedirect = this.handleRedirect.bind(this); 
    this.handleSubmitForm = this.handleSubmitForm.bind(this); 
} 

handleRedirect() { 
    this.props.push('/result'); 
} 

handleSubmitForm(cityFrom, cityTo, startDate) { 
    this.props.showResultofCar(cityFrom, cityTo, startDate, this.handleRedirect); 
} 
... 

Và cung cấp thành phần Form của bạn với handleSubmitForm thông qua đạo cụ. Bằng cách này, bạn sẽ không phải kết nối thành phần Form với các hành động gửi Redux.

Bên trong showResultofCar hành động của bạn bây giờ bạn có thể gọi handler redirect này trên Promise thành công:

export function showResultofCar(cityFrom, cityTo, date, redirectOnSuccess) { 
    ... 
    .then((response) => { 
     // console.log('response is', response); 
     dispatch({ type: 'CAR_FETCH_SUCCESS', payload: response.data }); 
     redirectOnSuccess(); 
    }) 
    ... 
} 

Tôi biết nó có thể không phải là sạch cách nhưng nó sẽ làm việc cho bạn.