reactjs - How to navigate to another page in react router v4 in the action

I am building an application that has a login screen and dashboard. When i successfully login i want my app to go to the dashboard but when i call a history.push('/dashboard'); in my ACTION(i think the history push will be called here after a promise). The URL changes but does not render the view.

My Login Component :

onSubmit(values){
    this.props.loginUser(values);
  }
render(){

return(
  

    

              label='Username'
        name='username'
        component={this.renderField}
        type="text"
      />


              label='Password'
        name='password'
        component={this.renderField}
        type="password"
      />

      
    
    {this.renderError()}

  
);}}


    function mapStateToProps({profile}){
  return {profile};
}

export default reduxForm({
  validate,

  form:'LoginForm'
})(withRouter(connect(mapStateToProps,{loginUser})(Login)))

My Action :

export function loginUser(values){
  return dispatch => axios.post(`${ROOT_URL}verifyuser`,values)
    .then((response)=>{
      if(response.data.code == 'success'){


        dispatch(success(response.data),history.push('/dashboard'));
      }else{
        dispatch(failure(response.data));
      }
    })

    function success(response) { return {type:userConstants.LOGIN_SUCCESS,payload:response}; }
    function failure(response) { return { type: userConstants.LOGIN_FAILURE, payload:response } }
}

My Dashboard Component :

class Dashboard extends Component {

  render(){
    return(
      
Test
    );

  }
}

MY routing

const App = () => (
  
    
    

  
)

ReactDOM.render(
  
    
      
    
  
  , document.getElementById('root'));