React Router 5.1.0使用useHistory做页面跳转导航

嚣张.miner

于 2020-09-01 17:32:18 发布

阅读量1.2w

点赞数 2

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/zm_miner/article/details/108341688

版权

本文介绍了在React Router v4中如何使用`withRouter`组件和`Route`标签进行页面跳转，并重点讲解了从v5.1.0开始引入的`useHistory`钩子，如何在React 16.8.0以上的版本利用此钩子实现页面导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Router v4页面跳转

在React Router v4中可以使用

withRouter组件
使用标签

1.使用withRouter组件

withRouter组件将注入history对象作为该组件的属性

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’
或者:

const ButtonWithRouter = (props) => {
  console.log('props', props)
  return (
    <Button

最低0.47元/天解锁文章