在前端开发中，路由是一个重要的概念，因为它使得 Web 应用程序可以根据 URL 进行不同的展示。React 框架提供了 react-router-dom 库，它是一个强大的路由库，可以帮助您在 React 应用程序中轻松管理路由。npm 包 use-react-router 正是基于 react-router-dom 库的一款实用工具，它可以帮助您更加灵活地使用路由。
安装 use-react-router
在您的 React 项目中，首先需要安装 use-react-router。可以使用 npm 命令行工具安装：
npm install use-react-router
使用 use-react-router
使用 use-react-router 非常简单，您只需要将其引用到您的 React 代码中，并在代码中使用它提供的钩子函数来使用路由功能。
使用 useHistory 钩子函数
useHistory 是 use-react-router 的钩子函数，它可以让您使用路由历史记录对象来实现页面跳转、返回等功能。以下是使用 useHistory 钩子函数的示例：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
-------- ------------- -
----- ------- - -------------
----- ----------------- - -- -- -
-----------------------------
-
------ -
------- ------------------------------ -- -- --- -------------
-
-在这个示例中，我们首先从 use-react-router 中引入 useHistory 钩子函数。接着，在组件中使用该钩子函数创建路由历史记录对象。最后，我们创建一个函数来实现页面跳转（使用 history.push 方法），并将该函数与页面的按钮绑定。
使用 useLocation 钩子函数
useLocation 钩子函数可以让您从 URL 中获取当前的位置信息，包括路径、查询参数等。以下是使用 useLocation 钩子函数的示例：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
-------- ------------- -
----- -------- - --------------
------ -
-----
---------- ----- -----------------------
-------- ----------- ---------------------
------
-
-在这个示例中，我们从 use-react-router 中引入 useLocation 钩子函数。使用该钩子函数可以获得当前路径（location.pathname）和查询参数（location.search），然后将其显示在页面上。
使用 useParams 钩子函数
useParams 钩子函数可以让您从 URL 中获取参数信息，比如动态路由上的 ID 参数。以下是使用 useParams 钩子函数的示例：
-- -------------------- ---- -------
------ - --------- - ---- -------------------
-------- ------------- -
----- - -- - - ------------
------ -
-----
---------- --- --------
------
-
-在这个示例中，我们从 use-react-router 中引入 useParams 钩子函数。使用该钩子函数可以获得 URL 中的参数值（使用{ id }语法），然后将其显示在页面上。
总结
在本文中，我们介绍了 npm 包 use-react-router 的使用方法，包括如何安装和使用其提供的钩子函数。通过使用 use-react-router，您可以更加方便地实现路由功能，提升网站的用户体验。希望本文能对您的 React 开发工作有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/use-react-router