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

从React Router v5.1.0开始,新增了useHistory钩子(hook),如果是使用React >16.8.0,编写以下函数组件,使用useHistory即可实现编程时页面跳转导航。

示例:

import { useHistory } from "react-router-dom";
function HomeButton() {
const history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}

React Router v4编程式页面跳转的方式(补充)

如果是React Router v4,可以使用以下方法:

  • 使用withRouter组件
  • 使用<Route>标签
  • 使用context

1、使用withRouter组件

withRouter组件将注入history对象作为该组件的属性。这样,不需要处理context,可直接访问push和replace方法。

示例:

import { withRouter } from 'react-router-dom'
const Button = withRouter(({ history }) => (
<button
type='button'
onClick={() => { history.push('/new-location') }}
>
Click Me!
</button>
))

2、使用<Route>标签

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

import { Route } from 'react-router-dom'
const Button = () => (
<Route render={({ history}) => (
<button
type='button'
onClick={() => { history.push('/new-location') }}
>
Click Me!
</button>
)} />
)

3、使用context

这个方法不推荐,context 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
})
}

推荐使用方法1和2,实现起来也简单。


版权声明:著作权归作者所有。

相关推荐

C++使用libcurl调用https接口做ssl证书验证

libcurl调用https路径,做SSL的验证有3个参数:CURLOPT_SSL_VERIFYPEER,CURLOPT_SSL_VERIFYHOST,CURLOPT_CAINFO。设置示例:CURL *hCurl = curl_easy_init();curl_easy_setopt(hCurl, CURLOPT_SSL_VERIFYPEER, 1L);curl_easy_setopt(hCur

React Router 4 表单提交后重定向示例

表单设置fireRedirect为发起从定向的标记,当表单提交后,更新它的值为fireRedirect=true。当fireRedirect为true时,重定向到原来的页面。import React, { Component } from 'react' import { Redirect } from 'react-router' export default class MyForm

微信小程序页面跳转的几种方法

本文总结了微信小程序页面跳转分为这几种类型:navigate:跳转页面,并保留当前页面。前一个页面可以使用navigateBack类型的跳转退回。redirect:关闭当前页面,然后跳转到新页面。switchTab:跳转到tabBar页面(在app.json中注册过的tabBar页面),同时关闭其他非tabBar页面。navigateBack:页面退回。微信原生提供的APInavigateTowx

React 16.2:Fragments语法的使用

React 16.2最大的变化是新增了fragments特性,fragments语法。示例:返回一首诗的片段敬请阅读 <h2>面朝大海,春暖花开</h2> <p>从明天起,做一个幸福的人</p> <p>喂马、劈柴,周游世界</p> <p>...</> React 16之前的版本在Re

JavaScript跳转页面的方法及区别

JavaScript跳转页面主要有三种方法:1、location.replacelocation.replace会替换当前页面的history,这意味着不能使用后退按钮回退replace前的页面。window.location.replace("https://majing.io"); 有点类似模拟http请求的重定向2、location.assignlocation.assi