React Router 5.1.0 uses useHistory to implement page jump navigation

In React Router v4 you can use

1. withRouter Component
2. Use Tags

1. Use the withRouter component

The withRouter component will inject the history object as a property of the component

import React from 'react'
import { withRouter } from 'react-router-dom'
import { Button } from 'antd'

export const ButtonWithRouter = withRouter(({ history }) => {
  console.log('history', history)
  return (
    <Button
      type='default'
      onClick={() => { history.push('/new-location') }}
    >
      Click Me!
    </Button>

  )
})

import { ButtonWithRouter } from './buttonWithRouter'

or:

const ButtonWithRouter = (props) => {
  console.log('props', props)
  return (
    <Button
      type='default'
      onClick={() => { props.history.location.push('/new-location') }}
    >
      Click Me!
    </Button>

  )
}

export default withRouter(ButtonWithRouter)

Import: import ButtonWithRouter from './buttonWithRouter'

2. Use Route Tags

At the route entrance

The Route component is not only used for matching locations. You can render a route without a path and it will always match the current location. The Route component passes the same properties as withRouter, so the history methods can be accessed through the history properties.

so:

export const ButtonWithRouter = () => (
  <Route render={({ history }) => {
    console.log('history', history)
    return (
      <button
        type='button'
        onClick={() => { history.push('/new-location') }}
      >
        Click Me!
      </button>
    )
  }} />
) 

React Router 5.1.0 uses useHistory

Starting from React Router v5.1.0, the useHistory hook has been added. If you are using React >16.8.0, you can use useHistory to achieve page jump

export const ButtonWithRouter = () => {
  const history = useHistory();
  console.log('history', history)
  return (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      Click Me!
    </button>
  )
}

This is the end of this article about the implementation of page jump navigation using useHistory in React Router 5.1.0. For more relevant ReactRouter useHistory page jump navigation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!