在 React 非组件环境下访问路由信息

在 React 应用中，路由通常使用组件来管理。然而，有时您可能需要在非组件环境下访问路由信息，例如在自定义钩子或实用程序函数中。本文将指导您如何在 React 的非组件环境中获取路由信息。

理解 React 路由

React 路由是一个库，它允许您在单页面应用程序中轻松管理应用程序的页面导航。它通过使用组件来表示不同的页面，并使用 <Route> 组件来定义页面之间的导航规则。

在非组件环境下获取路由信息

在非组件环境下获取路由信息，我们需要使用 React Router 提供的 useHistory() 钩子。此钩子返回一个历史对象，该对象提供有关当前路由的信息以及用于导航的方法。

要使用 useHistory() 钩子，您需要在应用程序的根组件中将其导入，如下所示：

import { useHistory } from "react-router-dom";

const App = () => {
  const history = useHistory();
  // ...
};

使用 useHistory() 获取路由信息

使用 useHistory() 钩子后，您可以访问以下属性：

• location: 包含当前路由信息的对象，包括路径、查询参数和哈希。
• navigate: 用于导航到其他页面的函数。
• push: 用于将新页面推入历史记录的函数。
• replace: 用于替换当前页面的函数。

例如，要获取当前路径，您可以使用 history.location.pathname。

示例

以下示例演示如何在自定义钩子中使用 useHistory() 钩子：

import { useHistory } from "react-router-dom";

const useRouteInfo = () => {
  const history = useHistory();

  const currentPath = history.location.pathname;
  const queryParams = history.location.search;

  return {
    currentPath,
    queryParams,
  };
};

然后，您可以在组件中使用 useRouteInfo() 钩子来访问路由信息，如下所示：

import { useRouteInfo } from "./useRouteInfo";

const MyComponent = () => {
  const { currentPath, queryParams } = useRouteInfo();

  // ...
};

结论

通过使用 useHistory() 钩子，您可以轻松地在 React 的非组件环境下访问路由信息。这使您能够在自定义钩子、实用程序函数和其他非组件代码中处理路由。通过理解 React 路由的基础知识并使用适当的 API，您可以轻松地在 React 应用中管理导航。