插件窝 干货文章 React Router v6中Link组件relative属性:route和path的区别是什么?

React Router v6中Link组件relative属性:route和path的区别是什么?

路由 路径 relative 当前 977    来源:    2025-03-25

React Router v6中Link组件relative属性的区别

在React Router v6中,<Link>组件的relative属性有两个可选值:"route""path",它们决定了相对路径的解析方式。

主要区别

特性 relative="route" relative="path"
解析基准 当前路由的路径模式 当前URL的实际路径
动态参数 会考虑路由参数 忽略路由参数
行为 更像编程式导航 更像传统HTML链接
适用场景 嵌套路由中更安全 简单相对路径时更直观

详细解释

relative="route"(默认值)

  • 基于当前路由的路径模式进行解析
  • 会考虑当前路由的动态参数(如:id
  • 更适合在嵌套路由中使用
  • 示例: jsx // 当前URL: /users/123 // 当前路由路径: /users/:id <Link to="profile" relative="route" /> // 结果: /users/123/profile (保留123参数)

relative="path"

  • 基于当前URL的实际路径进行解析
  • 忽略路由参数,像传统HTML相对路径一样工作
  • 更适合简单的相对路径导航
  • 示例: jsx // 当前URL: /users/123 <Link to="profile" relative="path" /> // 结果: /users/profile (忽略123参数)

何时使用哪种

  1. 使用route(默认)当

    • 你在嵌套路由中工作
    • 你想保留当前路由的参数
    • 你需要与useNavigate行为一致
  2. 使用path

    • 你需要简单的相对路径导航
    • 你不想保留当前路由参数
    • 你需要像传统HTML链接一样的行为

实际示例

// 假设当前URL是 /users/123/settings
// 当前路由路径是 /users/:id/settings

<Link to="profile" relative="route" />
// 结果: /users/123/profile (保留id参数)

<Link to="profile" relative="path" />
// 结果: /users/123/profile (与route相同,因为URL和路由模式匹配)

<Link to="../profile" relative="route" />
// 结果: /users/123/profile (向上导航但保留id)

<Link to="../profile" relative="path" />
// 结果: /users/profile (向上导航并忽略id)

理解这个区别可以帮助你在复杂路由结构中更精确地控制导航行为。