+1 vote
in ReactJS by

How do you programmatically navigate using React Router v4?

1 Answer

0 votes
by

There are three different ways to achieve programmatic routing/navigation within components.Using the withRouter() higher-order function:

  1. 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
      })
    }

Related questions

+1 vote
asked Mar 2, 2020 in ReactJS by RShastri
+1 vote
asked Mar 2, 2020 in ReactJS by RShastri
...