在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跳转内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟!
您可能感兴趣的文章:
- 使用hooks写React组件需要注意的5个地方
- React+Ant Design开发环境搭建的实现步骤
- Vite搭建React项目的方法步骤
- react获取input输入框的值的方法示例
- react实现Radio组件的示例代码
- 聊一聊我对 React Context 的理解以及应用
- react hooks入门详细教程
- 使用 React 和 Threejs 创建一个VR全景项目的过程详解
- 简单分析React中的EffectList
本文由 华域联盟 原创撰写:华域联盟 » React Router 如何使用history跳转的实现
转载请保留出处和原文链接:https://www.cnhackhy.com/56110.htm