在 React 中從查詢字串中獲取 URL 引數值

Irakli Tchigladze 2023年1月30日 2021年12月4日
  1. React Router V3
  2. React Router V4 和 React Router V5
在 React 中從查詢字串中獲取 URL 引數值

在建立 React 應用程式的整個過程中,你可能偶爾需要從查詢字串中提取引數值。這將允許你在整個應用程式中引用 parameter 值。

隨著 2017 年 React Router v4 的釋出,解析的 this.props.location.query 屬性被刪除。開發人員必須找到一種新方法來從查詢字串中讀取引數值。在本文中,我們將看看 React 新舊版本的解決方案。

React Router V3

從 React Router v3 中的 query 字串中提取引數值很容易。這個版本的 React 會為你完成所有的工作,並提供解析後的位置作為 prop。如果你檢查以下物件的值:

this.props.location.query

你會發現它包含查詢中所有引數的鍵-值對。 (查詢是 URL 中 ? 符號之後的部分)

如果 query 物件不包含你要查詢的引數,那麼你還應該檢視 path 引數值,這些值可在以下位置訪問:

this.props.match.params.redirectParam

只要你執行一個安裝了 React Router v3 的應用程式,你的元件就接受 props,你可以從 query 字串和 path 獲取引數值。

從 v4 開始,刪除了 this.props.location.query 物件。刪除它的主要原因是允許開發人員建立獨特的方式來儲存 query 字串。

React Router V4 和 React Router V5

React Router v4 中的 queries 仍然可以訪問,但開發人員必須自己將其轉換為字串。像 qsquery-string 這樣的庫就是為了解決這個確切的問題而建立的。

在較新的 React Router 版本中,你可以使用更新的介面和 query-string 庫解析你的 query 物件。

const queryToStr = require('query-string');
const result = queryToStr.parse(this.props.location.search);

對於類元件

上面的例子適用於 React 中的類元件。

使用庫來解析 this.props.location.search 可以返回一個解析後的 query 物件,帶有鍵-值對引數及其值。

對於功能元件

在過去的幾年裡,React 社群開始放棄類元件,轉而支援函式式元件。切換背後的主要原因是功能元件使用 React 鉤子的新能力。

當從 query 字串中提取引數值時,不要使用 this.props.location.search 的值,而是使用 useLocation() 鉤子的例項。

鉤子不返回解析的 query 物件。你仍然需要解析鉤子的例項以獲取鍵-值對引數及其值。

如果你使用 v4(或更高)版本的 React-Router 執行應用程式,以下程式碼應該會給你所需的結果:

const queryToStr = require('query-string');
const result = queryToStr.parse(useLocation().search);

多虧了 useLocation() 鉤子,這段程式碼看起來更簡潔。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相關文章 - React Router