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.

    import { withRouter } from 'react-router-dom'; // this also works with 'react-router-native'
    const Button = withRouter(({ history }) => (
    <button
    type="button"
    onClick={() => {
    history.push('/new-location');
    }}
    >
    {'Click Me!'}
    </button>
    ));
  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.

    import { Route } from 'react-router-dom';
    const Button = () => (
    <Route
    render={({ history }) => (
    <button
    type="button"
    onClick={() => {
    history.push('/new-location');
    }}
    >
    {'Click Me!'}
    </button>
    )}
    />
    );
  3. Using context:

    This option is not recommended and treated as unstable API.

    const Button = (props, context) => (
    <button
    type="button"
    onClick={() => {
    context.history.push('/new-location');
    }}
    >
    {'Click Me!'}
    </button>
    );
    Button.contextTypes = {
    history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired,
    }),
    };

September 30, 2022
766