在 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
仍然可以訪問,但開發人員必須自己將其轉換為字串。像 qs
和 query-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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn