React路由的history對象的插件history的使用解讀
React路由的history對象插件history使用
在react-router中組件里面的跳轉(zhuǎn)可以用<Link>
但是在組件外面改如何跳轉(zhuǎn)，需要用到react路由的history
首先是history的安裝
npm install history --save
我創(chuàng)建了一個JS文件
方便各個文件引用
history.js
import { createBrowserHistory } from 'history'
const history = createBrowserHistory({
? ? basename: '', ? ? ? ? ? ? //基鏈接
? ? forceRefresh: true ? ? ? ?//是否強制刷新
});
export default historyhistory實現(xiàn)跳轉(zhuǎn)
push
使用push可以將一條新的歷史記錄推送到歷史堆棧中
? ? history.push('/a');
? ? history.push('/a',{name: 'jac'});
? ? history.push({
? ? ? ? pathname: '/a',
? ? ? ? state: {
? ? ? ? ? ? name: 'jac'
? ? ? ? }
? ? });replace方法和push方法使用形式一樣，replace的作用是取代當前歷史記錄
go：此方法用來前進或者倒退，history.go(-1);goBack：此方法用來回退，history.goBack();goForward：此方法用來前進，history.goForward();
React中history問題記錄
在學習react的時候，創(chuàng)建了一個react+ts的項目框架。遇到一個問題，使用history無法進行頁面跳轉(zhuǎn)，即使跳轉(zhuǎn)也無法渲染頁面。
創(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
推測是版本的問題，于是將版本降低，能正常跳轉(zhuǎn)。
解決方法
降低history版本，就可以解決無法渲染問題。
npm install history@4.1.0 -D
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了React狀態(tài)提升案例，所謂 狀態(tài)提升 就是將各個子組件的 公共state 提升到它們的父組件進行統(tǒng)一存儲、處理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-04-04
React?函數(shù)式組件與類組件的主要區(qū)別在于它們的定義和聲明方式以及它們之間的一些特性,所以本文就詳細的給大家講講React中函數(shù)式組件與類組件有何不同,需要的朋友可以參考下2023-09-09![react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題](http://img.jbzj.com/images/xgimg/bcimg2.png)
react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題
本文主要介紹了react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題,文中通過圖文示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01
在React中使用IndexedDB進行前端離線存儲,可以存儲大量數(shù)據(jù),支持復雜的數(shù)據(jù)類型和高性能查詢,通過示例展示了如何創(chuàng)建數(shù)據(jù)庫、添加數(shù)據(jù)、查詢數(shù)據(jù)和構建一個簡單的待辦事項應用,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要介紹了react PropTypes校驗傳遞的值操作,結(jié)合實例形式分析了react PropTypes針對傳遞的值進行校驗操作相關實現(xiàn)技巧,需要的朋友可以參考下2020-04-04
這篇文章主要為大家介紹了React?Fiber構建completeWork源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
React Native 集成jpush-react-native的示例代碼
這篇文章主要介紹了React Native 集成jpush-react-native的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細介紹了React實現(xiàn)評論的添加和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
眾所周知，性能是Web應用界面的關鍵方面，它直接影響到用戶的使用體驗。本文將向您展示十種提高React UI性能的特定技術和一般方法。2021-05-05
這篇文章主要介紹了react實現(xiàn)阻止父容器滾動方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11