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

1. React Router V3
2. React Router V4 和 React Router V5

在建立 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() 鉤子，這段程式碼看起來更簡潔。