react中 usePathname 的作用和使用场景

usePathname 是 React Router v6.4 引入的一个 Hook，它允许你获取当前 URL 的路径名。路径名是 URL 的一部分，它代表你应用当前所在的页面。例如，对于 URL https://example.com/about，路径名是 /about。

在与 React Router 的 <Link> 标签结合使用时，usePathname 可以帮助你获取当前页面的路径，并做一些与导航相关的逻辑处理，比如：

• 高亮当前活动页面的链接。
• 根据当前路径显示不同的组件或内容。
• 执行基于 URL 的其他逻辑。

usePathname 的基本使用

usePathname 可以从 react-router-dom 中导入并使用：

import { usePathname } from 'react-router-dom';

function MyComponent() {
  const pathname = usePathname();

  return (
    <div>
      <p>当前的路径是: {pathname}</p>
    </div>
  );
}

usePathname 的返回值

• usePathname() 返回的是当前 URL 的路径部分，不包括查询参数和哈希值。例如，https://example.com/about?search=test#section1 的路径名将是 /about。
• 如果你的应用当前在 /home/dashboard，usePathname 会返回 "/home/dashboard"。

常见应用场景

1. 高亮当前页面的导航项

你可以通过 usePathname 来高亮当前页面的导航链接，这样用户可以明确知道自己在哪个页面上。

import { Link, usePathname } from 'react-router-dom';

function Navbar() {
  const pathname = usePathname();

  return (
    <nav>
      <ul>
        <li className={pathname === '/' ? 'active' : ''}>
          <Link to="/">Home</Link>
        </li>
        <li className={pathname === '/about' ? 'active' : ''}>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
}

在这个例子中，当用户位于 /about 页面时，About 链接会被添加 active 类，从而实现高亮。

2. 条件渲染

根据不同的路径渲染不同的组件或内容。例如，在某些页面上显示特殊的组件，而在其他页面不显示。

function MyComponent() {
  const pathname = usePathname();

  return (
    <div>
      {pathname === '/special' ? (
        <SpecialComponent />
      ) : (
        <RegularComponent />
      )}
    </div>
  );
}

3. 面包屑导航

使用 usePathname，可以构建基于当前路径的面包屑导航：

function Breadcrumb() {
  const pathname = usePathname();
  const pathSegments = pathname.split('/').filter(Boolean);  // 分割路径名

  return (
    <nav>
      <ul>
        {pathSegments.map((segment, index) => (
          <li key={index}>
            <Link to={`/${pathSegments.slice(0, index + 1).join('/')}`}>
              {segment}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}

总结

• usePathname 用于获取当前页面的路径名，适用于基于 URL 路径的逻辑处理。
• 它可以用于高亮导航链接、条件渲染、构建面包屑导航等场景。
• 在结合 React Router 的 <Link> 标签时，可以使页面的导航更加动态和用户友好。