title: redirect from redux action in react router v4
body: <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>