随着单页应用变得越来越流行，更多的前端应用将其状态存储在URL参数中。这样做的好处是：用户可以定向复制粘贴应用程序的某一特定状态，方便分享和嵌入。这也有助于SEO，因为谷歌和其他搜索引擎可以看到页面在服务器上的渲染状态。
但是手动管理URL参数十分繁琐，特别是对于大型应用程序。这时候，我们可以使用 react-query-param，一个方便的npm包，来管理我们的URL参数。
安装
使用NPM安装 react-query-param。
npm install --save react-query-param
创建 URL 参数
现在，我们将创建一个简单的搜索页面，其中我们将展示如何使用 react-query-param来处理 URL 参数。
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ - ----------- - ---- ---------------
------ - -------------- ----------- - ---- ---------------------
-------- -------- -
----- ------- --------- - -------------
----- ------------ -------------- - ----------------------- -------------
----- -------- - --------------
------------ -- -
-- ------------ -
---------------------
-
-- --------------
-------- --------------- -
-------------------
-------------------- - ----------------- ---- ---
-
-------- -------------------- -
-------------------------
-
------ -
-----
----- ------------------------
------ --------------------------------
------ ----------- ----------- ------------- ---------------------------- --
------- -----------------------------
-------
----------- -- ------------ ---- -----------------
------
--
-
------ ------- -------在这个例子中，我们使用 useState来管理搜索查询，而使用 useQueryParam将URL参数 search 添加到组件状态中。此外，我们使用 useEffect来同步URL参数和我们的搜索查询状态。
当用户提交搜索表单时，我们使用 setSearchTerm来更新URL参数，如果设置 replaceInHistory 为 true，那么我们将替换历史记录中最新条目的URL。
现在，当我们键入搜索查询并单击搜索按钮时，将会更新URL参数并再次加载Search组件。
处理 URL 参数
现在我们已经将URL参数添加到我们的搜索查询中，下一步是更新我们的UI以反映该查询。我们可以通过在组件中使用 useEffect 钩子和 useQueryParam 来实现。
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ - ----------- - ---- ---------------
------ - -------------- ----------- - ---- ---------------------
-------- -------- -
----- ------- --------- - -------------
----- ------------ -------------- - ----------------------- -------------
----- -------- - --------------
------------ -- -
-- ------------ -
---------------------
-
-- --------------
-------- --------------- -
-------------------
-------------------- - ----------------- ---- ---
-
-------- -------------------- -
-------------------------
-
------ -
-----
----- ------------------------
------ --------------------------------
------ ----------- ----------- ------------- ---------------------------- --
------- -----------------------------
-------
----------- -- ------------ ---- -----------------
------
--
-
------ ------- -------在这个例子中，我们使用 useEffect 钩子来监听 URL 参数的变化，如果存在 searchTerm，我们就更新UI，反之则不做处理。
结论
在这篇文章中，我们介绍了如何使用 react-query-param 包来简化处理 URL 参数的过程。我们创建了一个简单的示例搜索页面，并演示了如何在应用程序状态和 URL 参数之间同步并显示数据。这个包非常适用于需要频繁处理 URL 参数的大型应用程序。
本文示例代码: https://codesandbox.io/s/react-query-param-ehsof
希望这篇文章有所帮助，感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559df81e8991b448d7623