How do you programmatically navigate using React Router v4?

There are three different ways to achieve programmatic routing/navigation within components.

1. Using the withRouter() higher-order function:

The withRouter() higher-order function will inject the history object as a prop of the component. This object provides push() and replace() methods to avoid the usage of context.

2. Using <Route> component and render props pattern:

The <Route> component passes the same props as withRouter(), so you will be able to access the history methods through the history prop.

3. Using context:

This option is not recommended and treated as unstable API.