react中history(push,go,replace)切換路由方法的區(qū)別及說明
react中history(push,go,replace)切換路由方法區(qū)別
history.push
history.push方法更改當(dāng)前路由，會向當(dāng)前路由棧里面添加一條新的記錄，跳轉(zhuǎn)后點(diǎn)擊回退可回退到當(dāng)前頁面
history.replace
history.replace方法更改當(dāng)前路由，不會向當(dāng)前路由棧里面添加一條新的記錄，跳轉(zhuǎn)后點(diǎn)擊回退不可回退到當(dāng)前頁面，與他的名字一樣，是直接替換當(dāng)前路由
history.go
history.go方法與window.history.go()類似，參數(shù)為整數(shù)，表示向前或向后跳轉(zhuǎn)
react中的history出現(xiàn)的問題
在學(xué)習(xí)react的時候，創(chuàng)建了一個react+ts的項目框架。
遇到一個問題，使用history無法進(jìn)行頁面跳轉(zhuǎn)，即使跳轉(zhuǎn)也無法渲染頁面。
創(chuàng)建項目
使用以下語法創(chuàng)建了一個簡單的項目框架
create-react-app xxx --scripts-version=react-scripts-ts
history的用法
在react-router很大的程度上依賴history的功能。
history分為兩類：
- BrowserHistory和HashHistory。
- 分別對應(yīng)的react-router-dom中的BrowserRouter和HashRouter 兩個路由器。
現(xiàn)象
使用了Router這個路由器，傳入history屬性，但是在使用createHashHistory 和 createBrowserHistory創(chuàng)建的history時
出現(xiàn)了問題：
- 路由發(fā)生了改變，頁面并沒有渲染。
原因
react-router-dom是基于react-router進(jìn)行開發(fā)的。
在npm中的history庫中找到：
- 版本 5 的文檔可以在docs目錄中找到。這是當(dāng)前的穩(wěn)定版本。版本 5 用于 React Router 版本 6。
- 版本 4 的文檔可以在 v4 分支上找到。版本 4 用于 React Router 版本 4 和 5
推測是版本的問題，于是將版本降低，能正常跳轉(zhuǎn)。
解決方法
降低history版本，就可以解決無法渲染問題。
npm install history@4.1.0 -D
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React?Hooks中?useRef和useImperativeHandle的使用方式
這篇文章主要介紹了React?Hooks中?useRef和useImperativeHandle的使用方式,文中說明了useRef和useCallback一起使用,?可以解決閉包陷阱的問題,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Redis數(shù)據(jù)結(jié)構(gòu)面試高頻問題解析
這篇文章主要為大家介紹了Redis數(shù)據(jù)結(jié)構(gòu)高頻面試問題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
react-router browserHistory刷新頁面404問題解決方法
本篇文章主要介紹了react-router browserHistory刷新頁面404問題解決方法，非常具有實(shí)用價值，需要的朋友可以參考下2017-12-12
React+CSS?實(shí)現(xiàn)繪制豎狀柱狀圖
這篇文章主要介紹了React+CSS?實(shí)現(xiàn)繪制豎狀柱狀圖，文章圍繞主題展開詳細(xì)的內(nèi)容介紹。具有一定的參考價值，需要的朋友可以參考一下2022-09-09
useReducer 是除useState之外另一個與狀態(tài)管理相關(guān)的 hook，這篇文章主要為大家介紹了useReducer應(yīng)用的相關(guān)知識，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
在現(xiàn)代的Web應(yīng)用程序中,獲取用戶的地理位置信息是一項常見的需求,本文我們將介紹如何在React應(yīng)用程序中簡便地獲取用戶的經(jīng)緯度信息,需要的可以參考下2023-11-11
在單頁面里面，父子組件傳值是比較常見的，這篇文章主要介紹了React父子組件間的傳值的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
React Native模塊之Permissions權(quán)限申請的實(shí)例相機(jī)
這篇文章主要介紹了React Native模塊之Permissions權(quán)限申請的實(shí)例相機(jī)的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
React如何實(shí)現(xiàn)視頻旋轉(zhuǎn)縮放
這篇文章主要為大家詳細(xì)介紹了React如何實(shí)現(xiàn)視頻旋轉(zhuǎn)縮放功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
React Native 集成 iOS 原生功能(打印機(jī)功能為例)
在 React Native 項目中集成 iOS 原生功能是一個常見需求,本文將同樣以打印機(jī)功能為例,詳細(xì)介紹如何在 React Native 項目中集成 iOS 原生功能,感興趣的朋友一起看看吧2024-12-12