redirect from redux action in react router v4
<p>I have used <code>react-router v4</code> for routing in my application. In homepage, there is a form. When user fills up form and hits the submit button, then the action is dispatched(showResultofCar) and it should be redirected to result page which is not a child in the homepage instead it is a different page with different UI from top to bottom. </p>

<p>I tried to do this way but the action is not dispatched only the routing has been transitioned but shows the same homepage instead of new page(result)</p>

<p><strong>index.js</strong></p>

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

<p><strong>app.js</strong></p>

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

<p><strong>form.js(it is a child component of banner which is a child component of app)</strong></p>

<pre><code>onSubmit = (e) =&gt; {
  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 (
    &lt;div className="form-box text-center"&gt;
      &lt;div className="container"&gt;
        &lt;form className="form-inline" onSubmit={this.onSubmit}&gt;
          &lt;div className="form-group"&gt;
            &lt;Field
              name='Origen'
              component={renderGeoSuggestField}
            /&gt;
          &lt;/div&gt;
          &lt;div className="form-group"&gt;
            &lt;Field
              name="daterange"
              onFocusChange={this.onFocusChange}
            /&gt;
          &lt;/div&gt;
          &lt;Link to="/result"&gt;
          &lt;button type="submit" className="btn btn-default buscar"&gt;
            { intl.formatMessage({ id: 'buscar.text' })}
          &lt;/button&gt;
        &lt;/Link&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}
</code></pre>

<p><strong>result-parent.js</strong></p>

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

<p><strong>result.js</strong></p>

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

<p><strong>actions/index.js</strong></p>

<pre><code>export function showResultofCar(cityFrom, cityTo, date) {
  return (dispatch) =&gt; {
    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) =&gt; {
        console.log('response is', response);
        dispatch({ type: 'CAR_FETCH_SUCCESS', payload: response.data });
      })
      .catch((err) =&gt; {
        dispatch({ type: 'CAR_FETCH_FAILURE', payload: err });
      });
  };
}
</code></pre>

<p>My way is not working. How can i now redirect using react router v4 inside action?</p>

<p>Also i don't want the result to be shown inside App component(parent) because result page will be completely different with its own navbar,filtering and results option.</p>

<p><strong>Note: React router v4 has been used</strong></p>