React路由的history对象的插件history的使用解读
更新时间：2023年10月08日 08:41:36 作者：xggg0929
这篇文章主要介绍了React路由的history对象的插件history的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
React路由的history对象插件history使用
在react-router中组件里面的跳转可以用<Link>
但是在组件外面改如何跳转，需要用到react路由的history
首先是history的安装
npm install history --save
我创建了一个JS文件
方便各个文件引用
history.js
import { createBrowserHistory } from 'history'
const history = createBrowserHistory({
basename: '', //基链接
forceRefresh: true //是否强制刷新
});
export default historyhistory实现跳转
push
使用push可以将一条新的历史记录推送到历史堆栈中
history.push('/a');
history.push('/a',{name: 'jac'});
history.push({
pathname: '/a',
state: {
name: 'jac'
}
});replace方法和push方法使用形式一样，replace的作用是取代当前历史记录
go：此方法用来前进或者倒退，history.go(-1);goBack：此方法用来回退，history.goBack();goForward：此方法用来前进，history.goForward();
React中history问题记录
在学习react的时候，创建了一个react+ts的项目框架。遇到一个问题，使用history无法进行页面跳转，即使跳转也无法渲染页面。
创建项目
使用以下语法创建了一个简单的项目框架
create-react-app xxx --scripts-version=react-scripts-ts
history的用法
在react-router很大的程度上依赖history的功能。
history分为两类：BrowserHistory和HashHistory。分别对应的react-router-dom中的BrowserRouter和HashRouter 两个路由器。
现象
使用了Router这个路由器，传入history属性，但是在使用createHashHistory 和 createBrowserHistory创建的history时，出现了问题：
路由发生了改变，页面并没有渲染。
原因
react-router-dom是基于react-router进行开发的。在npm中的history库中找到：
- 版本 5 的文档可以在docs目录中找到。这是当前的稳定版本。版本 5 用于 React Router 版本 6。
- 版本 4 的文档可以在 v4 分支上找到。版本 4 用于 React Router 版本 4 和 5
推测是版本的问题，于是将版本降低，能正常跳转。
解决方法
降低history版本，就可以解决无法渲染问题。
npm install history@4.1.0 -D
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了React 远程动态组件实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
基于visual studio code + react 开发环境搭建过程
今天通过本文给大家分享基于visual studio code + react 开发环境搭建过程，本文给大家介绍的非常详细，包括react安装问题及安装 Debugger for Chrome的方法，需要的朋友跟随小编一起看看吧2021-07-07
React.memo为高阶组件。它与React.PureComponent 非常相似，但它适用于函数组件，但不适用于class组件。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-10-10
这篇文章主要介绍了React 实现拖拽功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
本篇文章主要介绍了react-native-fs插件的使用以及遇到的坑，详细的介绍了react-native-fs安装使用，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
在现代聊天应用中,除了文字和表情,图片分享也是一个重要的功能,本文将详细介绍如何在基于 React 的聊天应用中实现图片上传和预览功能,感兴趣的小伙伴跟着小编一起来看看吧2025-05-05
react中使用better-scroll滚动插件的实现示例
滚动在很多地方都可以使用，本文主要介绍了react中使用better-scroll滚动插件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
React styled-components设置组件属性的方法
这篇文章主要介绍了styled-components设置组件属性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
react Table准备Spin Empty ConfigProvider组件实现
这篇文章主要为大家介绍了react Table准备Spin、Empty、ConfigProvider组件实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-02-02
在React中,条件渲染是根据不同的条件选择性地渲染组件,本文介绍了三种常见的条件渲染方式：使用if语句、使用三元运算符和使用短路运算符,通过这些方法,我们可以根据应用的状态和用户的操作动态地显示不同的内容,从而提升用户体验和组件的可维护性2025-02-02
最新评论