React Router 如何使用history跳转的实现
程序员文章站
2022-06-23 08:45:02
在react-router中组件里面的跳转可以用但是在组件外面改如何跳转,需要用到react路由的historyreplace方法和push方法使用形式一样,replace的作...
在react-router中组件里面的跳转可以用<link>
但是在组件外面改如何跳转,需要用到react路由的history
replace方法和push方法使用形式一样,replace的作用是取代当前历史记录
go,此方法用来前进或者倒退,history.go(-1);
goback,此方法用来回退,history.goback();
goforward,此方法用来前进,history.goforward();
1.hook
import {usehistory} from 'react-router-dom'; function gopage(e) { history.push({ pathname: "/home", state: {id: 1} }); }
pathname是路由地址,state可以传参
获取参数:
import {uselocation} from 'react-router-dom'; function getparams(){ let location = uselocation(); let id = location.state.id; }
2.class组件
import react from 'react'; import {createbrowserhistory} from "history"; class app extends react.component{ constructor(props) { super(props); } gopage() { let history = createbrowserhistory() history.push({ pathname: "/home", state: {id: 1} }); history.go(); } render() {return null;} }
如果不调用history.go则路由改变了,但是页面不会跳转。
到此这篇关于react router 如何使用history跳转的实现的文章就介绍到这了,更多相关react router history跳转内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
推荐阅读
-
react-router实现跳转传值的方法示例
-
使用react-router4.0实现重定向和404功能的方法
-
react-router v4如何使用history控制路由跳转详解
-
React Router 5.1.0使用useHistory做页面跳转导航的实现
-
如何使用Intent实现Android间的页面跳转
-
React Router 如何使用history跳转的实现
-
前端路由实现react-router的使用方法详解
-
react-router实现跳转传值的方法示例
-
react-router v4如何使用history控制路由跳转详解
-
UIWindow不使用代理如何实现根控制器的跳转(页面跳转的实现)_html/css_WEB-ITnose