背景
在开发 React 应用时，我们通常会使用 React Router 来实现页面路由。随着用户不断地通过应用程序导航，React Router 可以根据 URL 的变化自动更新 UI。但是，当页面内容需要根据 URL 中的参数或查询字符串等信息从服务器端获取数据时，如何在 React Router 跳转时进行相应的数据查询和加载呢？本文将介绍一种基于 React Hooks 实现的解决方案。
解决方案
使用 useEffect 和 useLocation Hooks
React 提供了许多 Hooks，它们可以帮助我们更方便地编写状态逻辑。其中，useEffect 和 useLocation 是实现本文解决方案的关键 Hooks。
useEffect Hook 可以使我们在组件挂载（即渲染到 DOM 树上）后执行副作用操作。在 React Router 中，当路由发生变化时，我们可以利用 useEffect Hook 监听 location 对象的变化，并在其变化时重新加载所需数据。
useLocation Hook 可以让我们在函数组件中获取当前的 location 对象。此对象包含了当前 URL 的路径、查询字符串和哈希值等信息，我们可以从中提取出所需参数并发送到服务器端进行数据查询。
示例代码
下面的示例代码演示了如何使用 useEffect 和 useLocation Hooks，在 React Router 中监听 location 对象的变化，并在路由变化时根据 URL 中的参数从服务器端获取数据。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----------- - ---- -------------------
-------- ------------- -
----- -------- - --------------
----- ------ -------- - ---------------
------------ -- -
----- -------- ----------- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
--------------
-
------------
-- ------------
------ -
-----
- ---- - -
----
- --------------- -- -
--- -------------------------------
---
-----
- - -
-----------------
--
------
--
-
------ ------- ------------在上述代码中，我们在组件中使用了 useState Hook 来保存从服务器端获取的数据。在 useEffect Hook 中，我们首先定义了一个 fetchData 函数，用于根据 URL 中的查询字符串从服务器端获取数据。然后将此函数作为 useEffect 的回调函数，同时传入了依赖项 location，这样 useEffect 就会在 location 对象发生变化时执行 fetchData 函数。
最后，我们通过判断 data 是否存在来渲染 UI。如果 data 已经被加载，我们就遍历它并渲染成列表；否则，我们就显示 "Loading..." 文字。
总结
React Router 的自动更新 UI 功能使得开发单页应用变得更加简单和直观。但是，当页面内容需要从服务器端获取数据时，我们需要根据 URL 中的参数执行相应的数据查询和加载。本文介绍了如何使用 useEffect 和 useLocation Hooks 在 React Router 中实现这一目标。此方法简单易懂、代码量少，并且可以帮助我们更好地理解 React Hooks 的用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24671