首頁 web前端 js教程 React-Router中Url改變參數且不刷新頁面方法有哪些

React-Router中Url改變參數且不刷新頁面方法有哪些

May 12, 2018 am 10:17 AM
react-router 重新整理

這次帶給大家React-Router中Url改變參數並且不刷新頁面方法有哪些,React-Router中Url改變參數並且不刷新頁面的注意事項有哪些,以下就是實戰案例,一起來看一下。

問題

今天在寫頁面的時候發現一個問題,就是在React Router中使用了Url傳參的功能,像這樣:

export class MainRouter extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          ...
          <Route exact path={&#39;/channel/:channelId&#39;} 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中文網其它相關文章!

推薦閱讀:

JS callback回呼函數使用案例詳解

##JS DOM元素常見增刪改查操作詳解

以上是React-Router中Url改變參數且不刷新頁面方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

在 iPhone 上刷新網頁的 6 種方法 在 iPhone 上刷新網頁的 6 種方法 Feb 05, 2024 pm 02:00 PM

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

F5刷新金鑰在Windows 11中不起作用 F5刷新金鑰在Windows 11中不起作用 Mar 14, 2024 pm 01:01 PM

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

如何快速刷新網頁? 如何快速刷新網頁? Feb 18, 2024 pm 01:14 PM

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

react頁面傳值刷新後值消失怎麼辦 react頁面傳值刷新後值消失怎麼辦 Dec 29, 2022 am 11:11 AM

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

鍵盤刷新快速鍵是哪個 鍵盤刷新快速鍵是哪個 Feb 25, 2024 pm 10:38 PM

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

如何在Vue專案中使用路由實現頁面刷新和快取控制? 如何在Vue專案中使用路由實現頁面刷新和快取控制? Jul 22, 2023 am 11:13 AM

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

win11右鍵刷新的方法 win11右鍵刷新的方法 Dec 28, 2023 pm 02:29 PM

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

Win10開機桌面無限刷新該怎麼辦? Win10開機桌面無限刷新的解決方案 Win10開機桌面無限刷新該怎麼辦? Win10開機桌面無限刷新的解決方案 Jul 08, 2023 am 09:33 AM

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

See all articles