react中history(push,go,replace)切换路由方法的区别及说明
更新时间：2023年10月07日 16:36:13 作者：我是一个粉刷匠呀
这篇文章主要介绍了react中history(push,go,replace)切换路由方法的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react中history(push,go,replace)切换路由方法区别
history.push
history.push方法更改当前路由，会向当前路由栈里面添加一条新的记录，跳转后点击回退可回退到当前页面
history.replace
history.replace方法更改当前路由，不会向当前路由栈里面添加一条新的记录，跳转后点击回退不可回退到当前页面，与他的名字一样，是直接替换当前路由
history.go
history.go方法与window.history.go()类似，参数为整数，表示向前或向后跳转
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脚手架构建运行时报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了React ref的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
这篇文章主要为大家详细介绍了React纯前端模拟实现登录鉴权的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
React是一种流行的JavaScript库,用于构建用户界面,它提供了一种简单而灵活的方式来创建交互式的Web应用程序,在React中,我们经常需要监听用户的键盘事件,以便根据用户的输入做出相应的反应,本文将向您介绍如何在React中有效地监听键盘事件,并展示一些常见的应用场景2023-11-11
React函数组件useContext useReducer自定义hooks
这篇文章主要为大家介绍了React函数组件useContext useReducer自定义hooks示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
本文给大家介绍了React API集成与路由的最佳实践,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2026-02-02
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧2022-12-12
这篇文章主要介绍了详解如何用webpack4从零开始构建react开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法，以便于在运行过程中特定的阶段执行这些方法2022-11-11
Ant Design与Ant Design pro入门使用教程
Ant Design 是一个服务于企业级产品的设计体系,组件库是它的 React 实现,antd 被发布为一个 npm 包方便开发者安装并使用,这篇文章主要介绍了Ant Design与Ant Design pro入门,需要的朋友可以参考下2023-12-12
最新评论