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

Question

我在应用程序中使用了react router v4进行路由。在主页中，有一个表单。当用户填写表单并点击submit按钮时，操作将被调度（ShowResultToFar），并应重定向到结果页面，该页面不是主页中的子页面，而是一个从上到下具有不同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（它是横幅的子组件，是应用程序的子组件）

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内部操作重定向？

此外，我不希望结果显示在应用程序组件（父），因为结果页面将完全不同，有自己的导航栏，过滤和结果选项。

注意：已使用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);
}
...

并通过道具为表单组件提供可操作的SubmitForm。这样，您就不必将表单组件连接到Redux分派操作。

在ShowResultToFar操作中，您现在可以在promise成功时调用此重定向处理程序：

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

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