useHref和useResolvedPath的作用及使用示例

两个Hook都属于React Router v6提供的路径处理工具，底层逻辑关联但适用场景完全不同：

核心作用 #

• useResolvedPath
  输入任意合法的to值（相对路径、绝对路径、带查询参数/哈希的路径、带./..的层级路径），返回标准化的路径对象，包含pathname、search、hash三个拆分字段。解析时会自动基于当前路由层级、配置的basename补全路径，但不会做URL转义、不会拼接成完整字符串，只输出拆分后的结构化路径数据。
• useHref
  输入和useResolvedPath一致的to值，返回可以直接使用的完整URL字符串。它内部会先调用useResolvedPath拿到结构化路径，再拼接成带basename、经过特殊字符转义的完整链接，可直接赋值给原生<a>标签的href属性，或者用于跳转、分享链接生成等场景。

适用场景 #

• 选useResolvedPath的场景：
  不需要直接拿到可跳转的链接，只需要对路径各部分做自定义逻辑处理时使用，比如自定义路由高亮匹配、修改路径中的查询参数后再做跳转、基于解析后的路径做权限校验等。
• 选useHref的场景：
  需要拿到最终可直接使用的链接字符串时使用，比如自定义类Link组件、生成可复制的页面分享链接、给原生a标签赋值href保证鼠标悬浮时能显示正确的跳转地址等。

代码示例 #

以下示例基于React Router v6，路由配置如下，设置了basename为/app：

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import UserDetail from './pages/UserDetail'

function App() {
  return (
    <BrowserRouter basename="/app">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user/:userId" element={<UserDetail />} />
      </Routes>
    </BrowserRouter>
  )
}

useResolvedPath 使用示例 #

在首页（路由匹配/app/）中解析相对路径，做自定义激活态判断：

// pages/Home.jsx
import { useResolvedPath, useLocation } from 'react-router-dom'

export default function Home() {
  // 解析相对路径：目标为用户id=123的资料tab，定位到页面info锚点
  const targetPath = useResolvedPath('user/123?tab=profile#info')
  const currentLocation = useLocation()

  console.log(targetPath)
  // 控制台输出结构化结果：
  // {
  //   pathname: "/app/user/123",
  //   search: "?tab=profile",
  //   hash: "#info"
  // }

  // 自定义激活逻辑：判断目标路径和当前路径是否一致
  const isTargetActive = targetPath.pathname === currentLocation.pathname

  return (
    <div>
      <span style={{ color: isTargetActive ? '#f00' : '#333' }}>
        123号用户入口
      </span>
    </div>
  )
}

useHref 使用示例 #

自定义一个和原生Link行为一致的跳转按钮，保证右键复制链接、鼠标悬浮显示地址功能正常：

// components/CustomLink.jsx
import { useHref, useNavigate } from 'react-router-dom'

export default function CustomLink({ to, children, ...rest }) {
  const navigate = useNavigate()
  // 直接生成可使用的完整href
  const href = useHref(to)

  const handleClick = (e) => {
    e.preventDefault()
    navigate(to)
  }

  return (
    <a href={href} onClick={handleClick} {...rest}>
      {children}
    </a>
  )
}

// 页面中使用
// <CustomLink to="user/123?tab=profile">跳转到123号用户资料页</CustomLink>
// 最终渲染的a标签href属性为：/app/user/123?tab=profile

补充说明：两个Hook都无法处理-1、1这类历史导航类型的to值，传入这类值时useHref会返回当前页面的href，不会生成历史回退/前进对应的地址。

内容的提问来源于stack exchange，提问作者Durfingo005