React 第五十二节 Router中 useResolvedPath使用详解和注意事项示例

前言

useResolvedPath 是 React Router v6 提供的一个实用钩子，用于解析给定路径为完整路径对象。
它根据当前路由上下文解析相对路径，生成包含 pathname、search 和 hash 的完整路径对象。

一、useResolvedPath 核心用途

1. 路径解析：将相对路径解析为绝对路径
2. 链接构建：安全地构建导航链接
3. 路径比较：比较当前路径与目标路径
4. 动态路由处理：正确处理嵌套路由中的路径

二、useResolvedPath 解析结果对象

useResolvedPath 返回一个包含以下属性的对象：
比如原路径是：const resolved = useResolvedPath('../users?id=123#profile')

// 返回内容为
{ pathname: '/users', search: '?id=123', hash: '#profile' }

1. pathname: 解析后的绝对路径
2. search: 查询字符串（如果有）
3. hash: 哈希值（如果有）

三、useResolvedPath 基本用法示例

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

function PathInfo() {
  const resolved = useResolvedPath('../users?sort=name#section');
  
  return (
    <div>
      <h3>路径解析结果</h3>
      <p>原始路径: "../users?sort=name#section"</p>
      <p>解析后路径名: {resolved.pathname}</p>
      <p>查询参数: {resolved.search}</p>
      <p>哈希值: {resolved.hash}</p>
    </div>
  );
}

四、useResolvedPath 实际应用场景

4.1、在面包屑导航中解析路径

import { useResolvedPath, Link, useLocation, useMatches } from 'react-router-dom';

function Breadcrumbs() {
  const location = useLocation();
  const matches = useMatches();
  
  // 获取所有路由匹配项
  const crumbs = matches
    .filter(match => match.handle?.crumb)
    .map(match => {
      // 解析每个路由的路径
      const resolvedPath = useResolvedPath(match.pathname);
      return {
        pathname: resolvedPath.pathname,
        crumb: match.handle.crumb
      };
    });

  return (
    <nav className="breadcrumbs">
      {crumbs.map((crumb, index) => (
        <span key={index}>
          {index > 0 && ' > '}
          {index === crumbs.length - 1 ? (
            <span className="current">{crumb.crumb}</span>
          ) : (
            <Link to={crumb.pathname}>{crumb.crumb}</Link>
          )}
        </span>
      ))}
    </nav>
  );
}

// 在路由配置中使用
const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: 'dashboard',
        handle: { crumb: '控制面板' },
        element: <Dashboard />,
        children: [
          {
            path: 'stats',
            handle: { crumb: '统计' },
            element: <StatsPage />
          }
        ]
      },
      {
        path: 'users',
        handle: { crumb: '用户管理' },
        element: <UsersPage />
      }
    ]
  }
]);

4.2、创建自定义导航链接组件

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

function CustomNavLink({ to, children, ...props }) {
  const resolved = useResolvedPath(to);
  const match = useMatch({ path: resolved.pathname, end: true });
  
  return (
    <div className={`nav-item ${match ? 'active' : ''}`}>
      <Link to={to} {...props}>
        {children}
      </Link>
    </div>
  );
}

// 在导航中使用
function Navigation() {
  return (
    <nav>
      <CustomNavLink to="/">首页</CustomNavLink>
      <CustomNavLink to="/about">关于</CustomNavLink>
      <CustomNavLink to="/products">产品</CustomNavLink>
      <CustomNavLink to="/contact">联系我们</CustomNavLink>
    </nav>
  );
}

4.3、在嵌套路由中正确处理相对路径

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

function UserProfileLayout() {
  return (
    <div className="user-profile">
      <nav className="profile-nav">
        <ProfileNavLink to=".">概览</ProfileNavLink>
        <ProfileNavLink to="activity">活动</ProfileNavLink>
        <ProfileNavLink to="settings">设置</ProfileNavLink>
        <ProfileNavLink to="../friends">好友</ProfileNavLink>
      </nav>
      <div className="profile-content">
        <Outlet />
      </div>
    </div>
  );
}

function ProfileNavLink({ to, children }) {
  const resolved = useResolvedPath(to);
  const match = useMatch({ path: resolved.pathname, end: true });
  
  return (
    <Link 
      to={to} 
      className={match ? 'active' : ''}
    >
      {children}
    </Link>
  );
}

// 路由配置
const router = createBrowserRouter([
  {
    path: 'users',
    element: <UsersLayout />,
    children: [
      {
        path: ':userId',
        element: <UserProfileLayout />,
        children: [
          { index: true, element: <ProfileOverview /> },
          { path: 'activity', element: <ProfileActivity /> },
          { path: 'settings', element: <ProfileSettings /> }
        ]
      },
      {
        path: ':userId/friends',
        element: <UserFriends />
      }
    ]
  }
]);

4.4、动态生成侧边栏菜单

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

function SidebarMenu({ items }) {
  return (
    <nav className="sidebar">
      <ul>
        {items.map((item) => (
          <MenuItem key={item.path} to={item.path} label={item.label} />
        ))}
      </ul>
    </nav>
  );
}

function MenuItem({ to, label }) {
  const resolved = useResolvedPath(to);
  const match = useMatch({ path: resolved.pathname, end: false });
  
  return (
    <li className={match ? 'active' : ''}>
      <Link to={to}>{label}</Link>
      
      {/* 显示子菜单（如果存在且匹配） */}
      {match && resolved.pathname === to && (
        <ul className="submenu">
          <li><Link to={`${to}/details`}>详细信息</Link></li>
          <li><Link to={`${to}/analytics`}>分析</Link></li>
        </ul>
      )}
    </li>
  );
}

// 使用示例
const menuItems = [
  { path: '/dashboard', label: '仪表盘' },
  { path: '/projects', label: '项目' },
  { path: '/reports', label: '报告' },
  { path: '/team', label: '团队' }
];

function AppLayout() {
  return (
    <div className="app-layout">
      <SidebarMenu items={menuItems} />
      <main className="content">
        {/* 页面内容 */}
      </main>
    </div>
  );
}

五、useResolvedPath 高级用法：路径比较工具

import { useResolvedPath, useLocation } from 'react-router-dom';

// 自定义钩子：比较当前路径是否匹配目标路径
function usePathMatch(to) {
  const resolvedTo = useResolvedPath(to);
  const location = useLocation();
  
  // 创建当前路径对象（去除可能的尾部斜杠）
  const currentPath = {
    pathname: location.pathname.replace(/\/$/, ''),
    search: location.search,
    hash: location.hash
  };
  
  // 创建目标路径对象
  const targetPath = {
    pathname: resolvedTo.pathname.replace(/\/$/, ''),
    search: resolvedTo.search,
    hash: resolvedTo.hash
  };
  
  // 比较路径是否匹配
  return (
    currentPath.pathname === targetPath.pathname &&
    currentPath.search === targetPath.search &&
    currentPath.hash === targetPath.hash
  );
}

// 在组件中使用
function NavigationItem({ to, children }) {
  const isActive = usePathMatch(to);
  
  return (
    <li className={isActive ? 'active' : ''}>
      <Link to={to}>{children}</Link>
    </li>
  );
}

六、 useResolvedPath 注意事项

6.1、相对路径解析

useResolvedPath 基于当前路由位置解析相对路径

6.2、查询参数和哈希

保留原始路径中的查询字符串和哈希值

6.3、动态路由参数

不会解析路径参数（如 :id），保持原样

6.4、性能考虑

解析操作轻量，但避免在循环中过度使用

6.5、路由上下文

必须在路由组件内部使用（在 <Router> 上下文中）

七、useResolvedPath 与相关钩子对比

总结

useResolvedPath 是 React Router v6 中处理路径的强大工具，主要用于：

1. 在嵌套路由中正确处理相对路径
2. 构建动态导航组件
3. 创建面包屑导航等复杂导航结构
4. 安全地比较路径和构建链接

通过合理使用 useResolvedPath，可以创建更健壮、可维护的路由结构，避免硬编码路径导致的错误，并简化嵌套路由中的路径处理逻辑。