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