Shulou(Shulou.com)06/02 Report--

React Router 5.1.0 how to use useHistory to achieve page jump navigation, in view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

1. Using withRouter components

The withRouter component injects 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 ({history.push ('/ new-location')}} > Click Me!))

Introduce import {ButtonWithRouter} from'. / buttonWithRouter'

Or:

Const ButtonWithRouter = (props) = > {console.log ('props', props) return ({props.history.location.push (' / new-location')}} > Click Me!)} export default withRouter (ButtonWithRouter)

Introduction: import ButtonWithRouter from'. / buttonWithRouter'

2. Use the Route tag

At the route entrance

The Route component is not only used to match locations. You can render a route without a path, which always matches the current location. The Route component passes the same properties as withRouter, so you can access the methods of history through the properties of history.

So:

Export const ButtonWithRouter = () = > ({console.log ('history', history) return ({history.push (' / new-location')}} > Click Me!)}} / >)

React Router 5.1.0 uses useHistory

Since React Router v5.1.0, a new useHistory hook (hook) has been added. If you use React > 16.8.0, you can use useHistory to jump to the page.

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

This is the answer to the question about React Router 5.1.0 how to use useHistory to realize page jump navigation. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.