什么是 Hookrouter？

---

路由不是 React.js 的标准功能，hookrouter 是一种现代方法，简化了 React 组件内的导航功能。

React hooks 为 hook-router 模块提供了基础。它功能丰富，对初学者来说也足够简单。

在本节中，我们将介绍什么是 React.js 路由以及 Hooks 路由替代方案 useRoutes() 在 React 中是如何工作的。

什么是 React 中的路由？

路由是一种定义用户在应用程序中可用的一组页面之间导航的方式。为此，它将创建静态 HTML 视图，当用户访问应用程序或网站的不同部分时加载这些视图，并在用户在周围导航时更新这些视图。

React.js 路由器构建在 React 之上，它有助于在不同的视图之间移动。它是一个简单的 Javascript 函数，它获取有关您在应用程序中的当前位置的所有必要信息，然后向用户显示相应的视图。

使用 React.js 路由，当在浏览器中查看 URL 时，无需重新加载页面即可查看不同的内容。浏览器更改 URL，然后呈现满足该 URL 所需的内容。

Hookrouter

Hookrouter 是一个用于 React.js 应用程序的开源路由包，它提供了一个用于路由和请求的高阶组件。它将 React 组件与其在浏览器 URL 中对应的路由连接起来，并使动态更新 URL 路径变得容易，而无需重新加载整个页面。

useRouter() hook 是 React 应用程序中路由的完美解决方案。它是流行的 react-router 库的替代方案，它提供了一些 react-router 不具备的额外功能。hook 的主要用例之一是创建单页面应用程序。

hooks 通过将它们附加到高阶组件来工作，并且它们在组件挂载到 DOM 上时被调用。

这种路由解决方案提供了很大的灵活性，因为它提供了诸如延迟加载、深层链接和页面重定向等基本功能。

• 它不链接任何状态管理库，例如 Redux 或 MobX，这意味着您可以将 Hookrouter 用于小型和大型应用程序！

• Hookrouter 使用浏览器的 location 来更新 URL，而不是依赖于手动指定它；这确保您的 URL 永远不会中断。

React 的 Hooks 路由替代方案可以帮助您避免使用 React.js 路由的一些陷阱，例如代码重复以及在尝试添加更高级功能（例如 Ajax、身份验证或 SEO 优化）时对外部库的依赖。

Hook-router 与 React-router 的比较

React-router 是一个用于 React 的路由库，用于处理应用程序中的 URL 更改。它能够自动生成适当的链接并管理历史记录。

开发人员可以使用两种主要选项：hook-router 和 react-router。

hook-router 利用 React 的事件系统在组件状态更改时更改 URL，这意味着它无法保证在 URL 更改时采取了哪条路由。

react-router 使用 React 的 setState() 函数更改 URL ID，而不是使用 React 的事件系统，这意味着它在跟踪采取了哪条路由以更改 URL 方面没有任何问题。

它们都提供了许多相互之间的优势，但也存在一些缺点，因此在决定使用哪一个之前，最好先查看这两个选项。

React 中 HookRouter 的主要功能

让我们进一步讨论 hook-router 的一些突出功能 -

navigate() 方法

您可以通过 hookrouter 组件访问 navigate() Hook 方法，该方法将引导客户端到您传递的任何 URL。用户可以使用浏览器的后退键返回到其上一个 URL，因为每次使用 navigate() 函数都是渐进式导航。

您可能想知道 navigation() hook 是如何工作的。它主要接受三个变量：[queryParams]）、[replace] 和 navigate(URL，其中第二个参数控制替换行为。现有的记录条目将被删除，并创建一个新的条目。您只需将其参数更新为 true 即可获得该结果。

navigate('/user', true);

例如，以下提供的代码示例可用于访问关于网页。

navigate('/about')

默认情况下，navigate() 执行渐进式导航。因此，将在用户的浏览器历史记录中创建一条新记录，他们可以通过单击浏览器上的后退键返回到上一页。

切换功能

<Switch> 只通过显示第一个子 <Redirect> 或 <Route> 来呈现路由，这两个子元素对应于地址。当指定的导航路由不匹配时，<Switch> 通常用于生成 404 页面。

在使用 Hookrouter 执行路由后，这些路由将被呈现，因为它们是在对象中指定的。因此，默认情况下，其 useRoutes() hook 执行 <Switch> 组件的功能。例如，使用 Hookrouter，您只需要提供要呈现的错误或包含错误代码的元素以显示以导航 404 网页。

useRedirect() hook

hookrouter 包导出了 useRedirect() hook，它可以接受路由路径和目标路由作为输入。

useRedirect('/user', '/dashboard');

当 '/user' 路径匹配时，这将立即将访问者重定向到 '/dashboard' 页面。

必须记住，此 useRedirect() hook 启动了一个新的导航目的。路由历史记录中只会有一个记录。正如您在上一个摘录中观察到的，当从 '/user' 重定向到 '/dashboard' 时，'/user' URL 将不会出现在浏览器历史记录中。只有“/dashboard”路由可用。

结论

除了本文介绍的功能之外，Hookrouter 还提供了比 React-router 库更多的功能，包括服务器端图形、嵌套路由和组件的延迟下载。

从本文可以看出，Hookrouter 模块提供了一种更灵活、更快、更好的方法来管理 React 应用程序中的路由。