React Router - this.history.push changes URL but does not show component

Question

I have a router

<Router history={history}>
  <div>
    <Route exact path='/' component={App} />
    <Route exact path='/' component={UserForm} history={history} />
    <Route exact path='/test' component={Test} />
  </div>
</Router> 

So when I trigger this.props.history.push('/test'); I expect to see my test component, however the url changes and I see still see the App and UserFrom until I hit refresh on the Browser, then it behaves as expected.

I am calling this.props.history.push('/test'); (on the UserForm component) which does get called as the URL changes.

I have seen people doing this.context.history.push('/test'); in v4 but I have an empty context

Edit

So I tried wrapping it withRouter() as the other answer suggested at all levels with no luck.

export default withRouter(Main);

However I did notice is does run on render() but not onClick.

getUsers = () => {

}