从反应路由器v4中的redux动作重定向

Question

我已经react-router v4在我的应用程序中用于路由.在主页上,有一个表格.当用户填写表单并点击提交按钮时,将调度该操作(showResultofCar)并将其重定向到主页中不是子项的结果页面,而不是从上到下具有不同UI的不同页面.

我尝试这样做,但只是路由已经过渡但没有调度操作但显示相同的主页而不是新页面(结果)

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.js(它是横幅的子组件,是app的子组件)

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

结果,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>
  );
}
}

动作/ index.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 });
      });
  };
}

我的方式不起作用.我现在如何使用反应路由器v4重定向内部动作？

此外,我不希望结果显示在App组件(父级)中,因为结果页面将与其自己的导航栏,过滤和结果选项完全不同.

注意:已使用React路由器v4

Answer 1

您可以做的是在App.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);
}
...

并通过 props 为您的 Form 组件提供handleSubmitForm。这样您就不必将 Form 组件连接到 Redux 调度操作。

现在，您可以在showResultofCar操作内部在 Promise 成功时调用此重定向处理程序：

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

我知道这可能不是最干净的方式，但它会为你完成工作。