react中history(push,go,replace)切換路由方法的區(qū)別及說明
更新時間：2023年10月07日 16:36:13 作者：我是一個粉刷匠呀
這篇文章主要介紹了react中history(push,go,replace)切換路由方法的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
react中history(push,go,replace)切換路由方法區(qū)別
history.push
history.push方法更改當前路由，會向當前路由棧里面添加一條新的記錄，跳轉后點擊回退可回退到當前頁面
history.replace
history.replace方法更改當前路由，不會向當前路由棧里面添加一條新的記錄，跳轉后點擊回退不可回退到當前頁面，與他的名字一樣，是直接替換當前路由
history.go
history.go方法與window.history.go()類似，參數(shù)為整數(shù)，表示向前或向后跳轉
react中的history出現(xiàn)的問題
在學習react的時候，創(chuàng)建了一個react+ts的項目框架。
遇到一個問題，使用history無法進行頁面跳轉，即使跳轉也無法渲染頁面。
創(chuàng)建項目
使用以下語法創(chuàng)建了一個簡單的項目框架
create-react-app xxx --scripts-version=react-scripts-ts
history的用法
在react-router很大的程度上依賴history的功能。
history分為兩類：
- BrowserHistory和HashHistory。
- 分別對應的react-router-dom中的BrowserRouter和HashRouter 兩個路由器。
現(xiàn)象
使用了Router這個路由器，傳入history屬性，但是在使用createHashHistory 和 createBrowserHistory創(chuàng)建的history時
出現(xiàn)了問題：
- 路由發(fā)生了改變，頁面并沒有渲染。
原因
react-router-dom是基于react-router進行開發(fā)的。
在npm中的history庫中找到：
- 版本 5 的文檔可以在docs目錄中找到。這是當前的穩(wěn)定版本。版本 5 用于 React Router 版本 6。
- 版本 4 的文檔可以在 v4 分支上找到。版本 4 用于 React Router 版本 4 和 5
推測是版本的問題，于是將版本降低，能正常跳轉。
解決方法
降低history版本，就可以解決無法渲染問題。
npm install history@4.1.0 -D
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了react腳手架構建運行時報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React ref的使用詳解，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家詳細介紹了React純前端模擬實現(xiàn)登錄鑒權的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
React是一種流行的JavaScript庫,用于構建用戶界面,它提供了一種簡單而靈活的方式來創(chuàng)建交互式的Web應用程序,在React中,我們經(jīng)常需要監(jiān)聽用戶的鍵盤事件,以便根據(jù)用戶的輸入做出相應的反應,本文將向您介紹如何在React中有效地監(jiān)聽鍵盤事件,并展示一些常見的應用場景2023-11-11
React函數(shù)組件useContext useReducer自定義hooks
這篇文章主要為大家介紹了React函數(shù)組件useContext useReducer自定義hooks示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本文給大家介紹了React API集成與路由的最佳實踐,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2026-02-02
高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React 高階組件HOC使用小結，一起看看吧2022-12-12
詳解如何用webpack4從零開始構建react開發(fā)環(huán)境
這篇文章主要介紹了詳解如何用webpack4從零開始構建react開發(fā)環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
生命周期函數(shù)指在某一時刻組件會自動調(diào)用并執(zhí)行的函數(shù)。React每個類組件都包含生命周期方法，以便于在運行過程中特定的階段執(zhí)行這些方法2022-11-11
Ant Design與Ant Design pro入門使用教程
Ant Design 是一個服務于企業(yè)級產(chǎn)品的設計體系,組件庫是它的 React 實現(xiàn),antd 被發(fā)布為一個 npm 包方便開發(fā)者安裝并使用,這篇文章主要介紹了Ant Design與Ant Design pro入門,需要的朋友可以參考下2023-12-12