欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-02 21:00:45
目录1.使用withrouter组件2、使用route标签react router 5.1.0使用usehistory在react router v4中 可以使用 withrouter组件...

在react router v4中 可以使用

  1. withrouter组件
  2. 使用标签

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>

  )
})

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

引入 import { buttonwithrouter } from ‘./buttonwithrouter'

或者:

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)

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

引入: import buttonwithrouter from ‘./buttonwithrouter'

2、使用route标签

在route入口

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

route组件不仅用于匹配位置。 您可以渲染无路径的路由,它始终与当前位置匹配。 route组件传递与withrouter相同的属性,因此能够通过history的属性访问history的方法。

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使用useHistory做页面跳转导航的实现

react router 5.1.0使用usehistory

从react router v5.1.0开始,新增了usehistory钩子(hook),如果是使用react >16.8.0,使用usehistory即可实现页面跳转

export const buttonwithrouter = () => {
  const history = usehistory();
  console.log('history', history)
  return (
    <button
      type='button'
      onclick={() => { history.push('/new-location') }}
    >
      click me!
    </button>
  )
}

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

到此这篇关于react router 5.1.0使用usehistory做页面跳转导航的实现的文章就介绍到这了,更多相关reactrouter usehistory页面跳转导航内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!