useMatch

useMatch 是 React Router v6 引入的一个 Hook，它允许你在函数组件中检查当前 URL 是否与给定的路径模式匹配。这个 Hook 返回一个匹配结果对象或 null 如果没有匹配。这在你想要有条件地渲染组件、显示特定内容或执行某些逻辑时非常有用。

useMatch 的返回值

如果提供了路径模式并且与当前 URL 匹配，useMatch 将返回一个包含匹配信息的对象；否则返回 null。匹配结果对象具有以下属性：

• params: 包含所有动态参数的对象（例如，对于路径 /users/:id，如果 URL 是 /users/123，则 params.id === "123"）。
• pathname: 匹配的路径名部分。
• pathnameBase: 路径名的基础部分，不包括任何尾部斜杠之后的内容。
• pattern: 用于匹配的原始路径模式对象。

{
  params: { id: "123" },
  pathname: "/users/123",
  pathnameBase: "/users",
  pattern: { path: "/users/:id", caseSensitive: false, end: true }
}

使用场景

• 条件渲染：根据 URL 是否匹配某个模式来决定是否渲染组件或元素。
• 导航链接高亮：为当前激活的导航链接添加样式或类名。
• 嵌套路由：在父级路由中判断是否存在匹配的子路由，并据此渲染不同的内容。

示例代码

简单示例

import React from 'react';
import { useMatch } from 'react-router-dom';

function UserLink({ userId }) {
  const match = useMatch(`/users/${userId}`);

  return (
    <a href={`/users/${userId}`} style={{ fontWeight: match ? 'bold' : 'normal' }}>
      User {userId}
    </a>
  );
}

export default UserLink;

在这个例子中，当用户点击链接时，如果当前 URL 与提供的路径模式相匹配，则链接会以粗体显示。

条件渲染

你可以使用 useMatch 来检测当前页面是否是特定的路径，并基于此条件渲染组件。

import React from 'react';
import { useMatch } from 'react-router-dom';

function ShowUser() {
  const match = useMatch('/users/:id');

  if (match) {
    return <h1>User Profile: {match.params.id}</h1>;
  }

  return <h1>No User Selected</h1>;
}

export default ShowUser;

这里，只有当 URL 匹配 /users/:id 模式时才会渲染用户资料页面。

嵌套路由中的应用

在更复杂的场景下，比如嵌套路由，useMatch 可以帮助确定是否有子路由被激活，并相应地调整布局或内容。

import React from 'react';
import { Outlet, useMatch } from 'react-router-dom';

function UsersLayout() {
  const match = useMatch('/users/:id');
  
  return (
    <div>
      <h2>Users</h2>
      <nav>
        {/* 导航链接 */}
      </nav>
      <main>
        {match ? (
          <p>Viewing user details...</p>
        ) : (
          <p>Select a user to view their profile.</p>
        )}
        <Outlet />
      </main>
    </div>
  );
}

export default UsersLayout;

在这个例子中，UsersLayout 组件会根据是否有匹配的子路由来改变其渲染内容。

注意事项

• 性能优化：由于 useMatch 会在每次 URL 变化时重新计算，因此请确保只在必要时使用它，并考虑将相关逻辑移到子组件中以避免不必要的重渲染。
• 路径模式：传递给 useMatch 的路径模式可以是字符串或路径模式对象。字符串形式是最常用的，但如果你需要更细粒度的控制（如区分大小写），可以使用路径模式对象。

总结

useMatch 是一个强大的工具，它简化了在 React Router v6 中处理 URL 匹配的方式。通过理解并正确利用这个 Hook，你可以轻松实现条件渲染、导航链接高亮以及复杂的嵌套路由逻辑。