路由信息获取

在 Umi.js 中，获取当前路由信息是非常常见的需求，无论是为了动态更新页面内容、实现条件渲染还是处理导航逻辑。Umi.js 提供了多种方式来访问和操作路由信息，下面将详细介绍这些方法，并提供代码示例帮助你更好地理解和使用。

1. 使用 useLocation Hook

useLocation 是一个 React Hook，用于获取当前的路由位置对象（location object），该对象包含路径、查询参数等信息。

示例：获取当前路径和查询参数

import React from "react";
import { useLocation } from "umi";

function MyComponent() {
  const location = useLocation();

  return (
    <div>
      <p>Current Path: {location.pathname}</p>
      <p>Search Params: {location.search}</p>
      {/* 解析查询参数 */}
      <pre>{JSON.stringify(new URLSearchParams(location.search), null, 2)}</pre>
    </div>
  );
}

export default MyComponent;

2. 使用 useParams Hook

useParams Hook 可以用来获取动态路由匹配中的参数。这对于处理带有动态段的路径非常有用，比如 /users/:id。

示例：获取动态路由参数

import React from "react";
import { useParams } from "umi";

function UserProfile() {
  const { id } = useParams();

  return <div>User ID: {id}</div>;
}

export default UserProfile;

3. 使用 useHistory Hook

useHistory Hook 提供对历史记录（history）对象的访问，允许你在 JavaScript 中控制导航行为。虽然主要用于编程式导航，但它也提供了访问当前路由信息的方法。

示例：结合 useLocation 和 useHistory

import React from "react";
import { useHistory, useLocation } from "umi";

function MyComponent() {
  const history = useHistory();
  const location = useLocation();

  const handleGoBack = () => {
    history.goBack();
  };

  return (
    <div>
      <p>Current Path: {location.pathname}</p>
      <button onClick={handleGoBack}>Go Back</button>
    </div>
  );
}

export default MyComponent;

4. 使用 match 对象（类组件）

如果你正在使用类组件而不是函数组件，可以通过 this.props.match 访问到与当前路由相关的匹配信息。这包括路径参数和其他元数据。

示例：类组件中获取匹配信息

import React from "react";

class MyComponent extends React.Component {
  render() {
    const { match } = this.props;

    return (
      <div>
        <p>Matched Params: {JSON.stringify(match.params)}</p>
        <p>URL: {match.url}</p>
      </div>
    );
  }
}

export default MyComponent;

5. 使用 useRouteMatch Hook

useRouteMatch Hook 允许你检查是否匹配给定的路径模式，并返回匹配结果。这对于有条件地渲染组件或链接特别有用。

示例：检查路径匹配

import React from "react";
import { useRouteMatch } from "umi";

function MyComponent() {
  const match = useRouteMatch("/products/:id");

  if (match) {
    return <div>Product ID: {match.params.id}</div>;
  }

  return <div>No product selected.</div>;
}

export default MyComponent;

6. 获取完整的路由配置

有时候你可能需要访问整个应用的路由配置，例如在自定义中间件或插件中。你可以通过 app._plugin.applyPlugins 来访问路由配置。

示例：访问全局路由配置

// 在 umi 插件中
export function onGetInitialProps({ app }) {
  const routes = app._plugin.applyPlugins({
    key: "modifyRoutes",
    type: "modify",
    initialValue: app.getRoutes(),
  });

  console.log("All Routes:", routes);
}

7. 使用 useModel 和 dva 的 connect

如果你的应用使用了 dva 进行状态管理，可以通过 useModel 或 connect 来访问由 dva 管理的路由信息。不过，这种方式较为间接，通常更推荐直接使用上述提供的 Hooks。

总结

Umi.js 提供了多种便捷的方式让你能够轻松获取和操作路由信息。根据你的具体需求选择最合适的方法，可以极大地简化开发过程并提高代码的可维护性。