React 是一个非常流行的前端框架，它是以组件为基础的，可以让开发者更方便的开发应用程序，而 react-router-hooks 则是一个用于在 React 中使用路由的 npm 包。
在这篇文章中，我们将深入介绍 react-router-hooks 的使用方法，解释它的工作原理，并提供示例代码以及指导意义。
什么是 react-router-hooks?
react-router-hooks 是基于 react-router 的一个 npm 包，它是用于在 React 应用程序中使用路由的工具。它提供了一组 React hooks，这些 hooks 可以让你更简单地从路由中获取数据。
Hooks 是 React 16.8 之后的新增特性，它是一种让开发者更方便的使用 React 的方式，它可以让我们在不使用 class 组件的情况下实现状态管理等操作。使用 Hooks 的好处是可以让我们更简单地编写代码，减少代码量和复杂性。
安装 react-router-hooks
要使用 react-router-hooks，我们首先需要将其安装到我们的项目中。安装 react-router-hooks 可以使用 npm 或者 yarn，具体如下：
使用 npm:
--- ------- ------------------
使用 yarn:
---- --- ------------------
一旦安装完成，我们就可以在项目中引用 react-router-hooks，实现路由功能。
使用 react-router-hooks
一旦我们安装了 react-router-hooks，就可以使用它的各种 hooks 了。
下面我们将详细介绍 react-router-hooks 的常用 hooks：
useLocation
useLocation 是用于获取路由地址的 Hook，它返回一个对象，这个对象包含了当前路径的信息。
代码示例：
------ - ----------- - ---- ---------------------
-------- ------------- -
----- -------- - --------------
------ -
-----
--------- ------------------------
------
--
-此代码将使用 useLocation 来获取当前路径，并在组件中显示路径。
useHistory
useHistory 用于访问浏览器的历史记录。它提供了一组方法，让我们可以在 React 组件中模拟浏览器的历史记录。
代码示例：
------ - ---------- - ---- ---------------------
-------- ------------- -
----- ------- - -------------
-------- ------------- -
---------------------------
-
------ ------- ---------------------------------------
-在这个示例代码中，我们使用 useHistory 来获取浏览器的历史记录，并在点击按钮时使用 push 方法跳转到某个路径。
useRouteMatch
useRouteMatch 是反映你在应用程序中使用的当前路径匹配的一种 Hook。当你使用它时，它会返回一个对象，该对象包含当前路径的匹配信息。
代码示例：
------ - ------------- - ---- --------------------- -------- ------------- - ----- ----- - ---------------------------- ------ ---------- ------ - --- - ----------- -
在这个示例代码中，我们使用 useRoute 使用当前路径和给定的匹配路径进行比较，如果匹配就返回 true。
小结
在本文中，我们学习了如何使用 react-router-hooks 来实现在 React 中使用路由。我们从基础概念开始，深入探讨了该库的一些常用 hooks。通过这些实际的代码演示，我们可以更好地理解并掌握 react-router-hooks 的使用方法。
在日常开发中，为了更好地使用 react-router-hooks，建议学习完 react-router 的相关知识，这样可以更好地在开发过程中避免各种问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005680c81e8991b448e42d5