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()類(lèi)似，參數(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很大的程度上依賴(lài)history的功能。
history分為兩類(lèi)：
- 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腳手架構(gòu)建運(yùn)行時(shí)報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了react腳手架構(gòu)建運(yùn)行時(shí)報(bào)錯(cuò)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React ref的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
React純前端模擬實(shí)現(xiàn)登錄鑒權(quán)
這篇文章主要為大家詳細(xì)介紹了React純前端模擬實(shí)現(xiàn)登錄鑒權(quán)的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
詳解如何在React中有效地監(jiān)聽(tīng)鍵盤(pán)事件
React是一種流行的JavaScript庫(kù),用于構(gòu)建用戶(hù)界面,它提供了一種簡(jiǎn)單而靈活的方式來(lái)創(chuàng)建交互式的Web應(yīng)用程序,在React中,我們經(jīng)常需要監(jiān)聽(tīng)用戶(hù)的鍵盤(pán)事件,以便根據(jù)用戶(hù)的輸入做出相應(yīng)的反應(yīng),本文將向您介紹如何在React中有效地監(jiān)聽(tīng)鍵盤(pán)事件,并展示一些常見(jiàn)的應(yīng)用場(chǎng)景2023-11-11
React函數(shù)組件useContext useReducer自定義hooks
這篇文章主要為大家介紹了React函數(shù)組件useContext useReducer自定義hooks示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
本文給大家介紹了React API集成與路由的最佳實(shí)踐,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2026-02-02
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧2022-12-12
詳解如何用webpack4從零開(kāi)始構(gòu)建react開(kāi)發(fā)環(huán)境
這篇文章主要介紹了詳解如何用webpack4從零開(kāi)始構(gòu)建react開(kāi)發(fā)環(huán)境，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
React生命周期與父子組件間通信知識(shí)點(diǎn)詳細(xì)講解
生命周期函數(shù)指在某一時(shí)刻組件會(huì)自動(dòng)調(diào)用并執(zhí)行的函數(shù)。React每個(gè)類(lèi)組件都包含生命周期方法，以便于在運(yùn)行過(guò)程中特定的階段執(zhí)行這些方法2022-11-11
Ant Design與Ant Design pro入門(mén)使用教程
Ant Design 是一個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系,組件庫(kù)是它的 React 實(shí)現(xiàn),antd 被發(fā)布為一個(gè) npm 包方便開(kāi)發(fā)者安裝并使用,這篇文章主要介紹了Ant Design與Ant Design pro入門(mén),需要的朋友可以參考下2023-12-12