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 ? ? ? ?//是否強(qiáng)制刷新
});
export default historyhistory實(shí)現(xiàn)跳轉(zhuǎn)
push
使用push可以將一條新的歷史記錄推送到歷史堆棧中
? ? history.push('/a');
? ? history.push('/a',{name: 'jac'});
? ? history.push({
? ? ? ? pathname: '/a',
? ? ? ? state: {
? ? ? ? ? ? name: 'jac'
? ? ? ? }
? ? });replace方法和push方法使用形式一樣，replace的作用是取代當(dāng)前歷史記錄
go：此方法用來前進(jìn)或者倒退，history.go(-1);goBack：此方法用來回退，history.goBack();goForward：此方法用來前進(jìn)，history.goForward();
React中history問題記錄
在學(xué)習(xí)react的時候，創(chuàng)建了一個react+ts的項(xiàng)目框架。遇到一個問題，使用history無法進(jìn)行頁面跳轉(zhuǎn)，即使跳轉(zhuǎn)也無法渲染頁面。
創(chuàng)建項(xiàng)目
使用以下語法創(chuàng)建了一個簡單的項(xià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 遠(yuǎn)程動態(tài)組件實(shí)踐示例詳解
這篇文章主要為大家介紹了React 遠(yuǎn)程動態(tài)組件實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
基于visual studio code + react 開發(fā)環(huán)境搭建過程
今天通過本文給大家分享基于visual studio code + react 開發(fā)環(huán)境搭建過程，本文給大家介紹的非常詳細(xì)，包括react安裝問題及安裝 Debugger for Chrome的方法，需要的朋友跟隨小編一起看看吧2021-07-07
React.memo為高階組件。它與React.PureComponent 非常相似，但它適用于函數(shù)組件，但不適用于class組件。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-10-10
這篇文章主要介紹了React 實(shí)現(xiàn)拖拽功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
本篇文章主要介紹了react-native-fs插件的使用以及遇到的坑，詳細(xì)的介紹了react-native-fs安裝使用，具有一定的參考價值，有興趣的可以了解一下2017-09-09
在React聊天應(yīng)用中實(shí)現(xiàn)圖片上傳功能
在現(xiàn)代聊天應(yīng)用中,除了文字和表情,圖片分享也是一個重要的功能,本文將詳細(xì)介紹如何在基于 React 的聊天應(yīng)用中實(shí)現(xiàn)圖片上傳和預(yù)覽功能,感興趣的小伙伴跟著小編一起來看看吧2025-05-05
react中使用better-scroll滾動插件的實(shí)現(xiàn)示例
滾動在很多地方都可以使用，本文主要介紹了react中使用better-scroll滾動插件的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
React styled-components設(shè)置組件屬性的方法
這篇文章主要介紹了styled-components設(shè)置組件屬性的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
react?Table準(zhǔn)備Spin?Empty?ConfigProvider組件實(shí)現(xiàn)
這篇文章主要為大家介紹了react?Table準(zhǔn)備Spin、Empty、ConfigProvider組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-02-02
React中實(shí)現(xiàn)使用條件渲染來顯示不同的內(nèi)容
在React中,條件渲染是根據(jù)不同的條件選擇性地渲染組件,本文介紹了三種常見的條件渲染方式：使用if語句、使用三元運(yùn)算符和使用短路運(yùn)算符,通過這些方法,我們可以根據(jù)應(yīng)用的狀態(tài)和用戶的操作動態(tài)地顯示不同的內(nèi)容,從而提升用戶體驗(yàn)和組件的可維護(hù)性2025-02-02