javascript - 从 react router v4 中的 redux 操作重定向

Question

我在我的应用程序中使用了 react-router v4 进行路由。在主页上，有一个表格。当用户填写表单并点击提交按钮时，将调度操作(showResultofCar)并且它应该被重定向到结果页面，该页面不是主页中的子页面，而是从上到下具有不同 UI 的不同页面。

我试过这样做但是 Action 没有被调度只有路由已经转换但是显示相同的主页而不是新页面(结果)

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(它是横幅的子组件，横幅是应用的子组件)

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

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

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

我的方法行不通。我现在如何在操作中使用 react router v4 进行重定向？

此外，我不希望结果显示在 App 组件(父)内，因为结果页面将完全不同于其自己的导航栏、过滤和结果选项。

注意:已使用React router 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 为您的表单组件提供 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();
    })
  ...
}

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