How to push to History in React Router v4?

Question

In the current version of React Router (v3) I can accept a server response and use browserHistory.push to go to the appropriate response page. However, this isn

Answer 1

Simplest way in React Router 4 is to use

this.props.history.push('/new/url');

But to use this method, your existing component should have access to history object. We can get access by

1. If your component is linked to Route directly, then your component already has access to history object.

   eg:

   Here ViewProfile has access to history.

2. If not connected to Route directly.

   eg:

    }
   

   Then we have to use withRouter, a heigher order fuction to warp the existing component.

   Inside ViewUsers component

   • import { withRouter } from 'react-router-dom';

   • export default withRouter(ViewUsers);

   That's it now, your ViewUsers component has access to history object.

UPDATE

2- in this scenario, pass all route props to your component, and then we can access this.props.history from the component even without a HOC

eg:

 }