React-Router中Url改變參數且不刷新頁面方法有哪些
這次帶給大家React-Router中Url改變參數並且不刷新頁面方法有哪些,React-Router中Url改變參數並且不刷新頁面的注意事項有哪些,以下就是實戰案例,一起來看一下。
問題
今天在寫頁面的時候發現一個問題,就是在React Router中使用了Url傳參的功能,像這樣:
export class MainRouter extends React.Component { render() { return ( <BrowserRouter> <Switch> ... <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/> ... </Switch> </BrowserRouter> ); } }
依照官方文件的說法,可以在ChannelPerPage這個元件中使用
this.props.match.params
來取得url參數的值,但是我發現如果你在這個url下只將url中的參數部分改變,例如channelId從1變成2的時候,頁面並不會刷新。
解決方案
查閱資料後發現這樣的根本原因是props的改變並不會造成元件的重新渲染,只有state的變化才會造成元件的重新渲染,而url參數屬於props,故改變url參數並不會造成元件的重新渲染。
後來發現React的元件中有一個可複寫的方法
componentWillReceiveProps(nextProps) { ... }
這個方法可以在React元件中被複寫,這個方法將會在props改變的時候被調用,所以你可以使用這個方法將nextProps取得到,並且在這個方法裡面修改state的內容,這樣就可以讓元件重新被渲染。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是React-Router中Url改變參數且不刷新頁面方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

當您在iPhone上瀏覽網頁時,載入的內容會暫時存儲,只要瀏覽器應用程式保持開啟。然而,網站會定期更新內容,因此刷新頁面是清除舊資料並查看最新發佈內容的有效方法。這樣,您可以始終獲得最新的資訊和體驗。如果您想在iPhone上刷新頁面,以下貼文將向您解釋所有方法。如何在Safari上刷新網頁[4種方法]有幾種方法可以刷新您在iPhone上的Safari瀏覽器App上查看的頁面。方法1:使用「刷新」按鈕刷新您在Safari瀏覽器上開啟的頁面的最簡單方法是使用瀏覽器標籤列上的「刷新」選項。如果Safa

您的Windows11/10PC上的F5鍵是否無法正常運作? F5鍵通常用於刷新桌面或資源管理器或重新載入網頁。然而,我們的一些讀者報告說,F5鍵正在刷新他們的計算機,並且無法正常工作。如何在Windows11中啟用F5刷新?要刷新您的WindowsPC,只需按下F5鍵即可。在某些筆記型電腦或桌上型電腦上,您可能需要按下Fn+F5組合鍵才能完成刷新操作。為什麼F5刷新不起作用?如果按下F5鍵無法刷新您的電腦或在Windows11/10上遇到問題,可能是因為功能鍵被鎖定。其他潛在原因包括鍵盤或F5鍵

頁面刷新在我們日常的網路使用中非常常見,當我們訪問一個網頁後,有時會遇到一些問題,例如網頁加載不出來或顯示不正常等。這時候我們通常會選擇刷新頁面來解決問題,那麼要如何快速刷新頁面呢?下面我們就來探討頁面刷新的快捷鍵。頁面刷新快捷鍵是一種透過鍵盤操作來快速刷新目前網頁的方法。在不同的作業系統和瀏覽器中,頁面刷新的快捷鍵可能有所不同。下面我們以常見的W

react頁面傳值刷新後值消失的解決方法:1、刷新頁面,查看state裡面的資料是否會清空;2、透過「const name = location.query.name;const id = location.query.id;」方法在跳轉連結中增加參數,即可在實現傳參的同時刷新頁面後資料不會遺失。

鍵盤刷新快捷鍵是哪個隨著電腦技術的發展,鍵盤成為我們日常工作和生活中不可或缺的設備。鍵盤的功能遠不止輸入文字,它也常用來操作電腦的各種功能,提升我們的工作效率。而鍵盤的快速鍵更是讓我們更快速、更方便地完成各種操作。在平常使用電腦的過程中,我們常常會遇到需要頁面重新整理的情況。當我們打開網頁或軟體運行時,有時頁面會出現卡頓或無法載入的情況,這時候會刷新頁面

如何在Vue專案中使用路由實現頁面刷新和快取控制?在Vue專案開發中,使用路由實現頁面刷新和快取控制是非常常見的需求。本文將介紹如何在Vue專案中使用路由來實現頁面刷新和快取控制,並給出對應的程式碼範例。路由配置首先,在Vue專案中需要使用vue-router來進行路由設定。可以透過npm安裝vue-router,並在main.js中進行引入和設定。 impor

刷新是我們使用電腦時經常會進行的操作,透過刷新可以快速顯示我們對介面、顯示、圖示等屬性的設定情況,但是很多朋友在使用win11時發現右鍵選單中沒有刷新了,其實這是因為win11增加了一個選單,需要先進入才可以刷新。 win11怎麼右鍵刷新1、在win11系統中,右鍵選單進行了更改,我們右鍵點擊空白處將無法找到刷新。 2.取而代之的是,我們需要在右鍵選單中找到最下方的「showmoreoptions」3、進入「showmoreoptions」之後,就可以找到刷新了。 4.此外,其實我們不需要使用右鍵刷新

近期有客户在应用Win10系统软件的情况下,发觉有时候桌面会一直在全自动刷新,如何也根本停不下来,并且在大家视频观看听歌时也一直在刷,十分影响到应用感受,那麼计算机开机无线网络刷新怎么办呢,下边小编就把Win10开机桌面无限刷新的处置方式告知大伙儿。计算机开机无线网络刷新该怎么办?1、大家进到桌面后,鼠标点击点一下菜单栏标志。2、在开启的界面中选择【资源管理器】。3、进入页面后,大家点一下【windows任务管理器】,选择【结束任务】。4、进行后返回桌面鼠标右键选择菜单栏。5、这时大家点一下【运
