javascript - redirect from redux action in react router v4

I have used react-router v4 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.

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)

index.js

ReactDOM.render(
  
    
      
        
      
    
  
  , document.querySelector('.app'));

app.js

render() {
  return (
      

                  showModal={(e) => this.showModal(e)}
          hideModal={() => this.hideModal()}
          show={this.state.show}

          onHide={() => this.hideModal()}
        />
          
          
          

        
        );
}

form.js(it is a child component of banner which is a child component of 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 (
    

      

        

          


                          name='Origen'
              component={renderGeoSuggestField}
            />
          
          

                          name="daterange"
              onFocusChange={this.onFocusChange}
            />

          
          
          
        
        
      
    
  );

}

result-parent.js

class ResultParent extends Component {
  render() {
    return (
      

        

      
    );
  }
}

result.js

class Result extends Component {
render() {

  return (
    

      
      
      
    
  );
}
}

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

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

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.

Note: React router v4 has been used