插件窝 干货文章 React Router v6中Link组件的relative属性:route和path模式有何区别?

React Router v6中Link组件的relative属性:route和path模式有何区别?

relative 路径 路由 导航 376    来源:    2025-03-25

React Router v6中Link组件的relative属性解析

在React Router v6中,<Link>组件的relative属性用于控制相对路径的解析方式,有两种模式:"route"(默认)和"path"

两种模式的区别

1. relative="route" (默认模式)

  • 行为:相对于当前路由的路径段进行解析
  • 解析方式:从当前路由的URL路径末尾开始计算
  • 适用场景:当你想在当前路由层级内进行导航时
// 当前URL: /blog/post/123
<Link to="edit" relative="route" />
// 将导航到: /blog/post/123/edit

2. relative="path"

  • 行为:相对于当前URL路径进行解析
  • 解析方式:像传统的HTML相对路径一样工作
  • 适用场景:当你想要更传统的相对路径行为时
// 当前URL: /blog/post/123
<Link to="edit" relative="path" />
// 将导航到: /blog/post/edit

实际使用示例

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

function PostPage() {
  return (
    <div>
      {/* 默认relative="route" */}
      <Link to="comments">查看评论</Link>

      {/* 显式设置relative="path" */}
      <Link to="../edit" relative="path">编辑文章</Link>
    </div>
  );
}

何时使用哪种模式

  1. 使用relative="route"(默认)的情况

    • 在嵌套路由结构中导航
    • 保持与当前路由层级一致的导航
    • 大多数React Router应用场景
  2. 使用relative="path"的情况

    • 需要传统web应用的相对路径行为
    • 需要向上导航到父路由
    • 需要更精确控制路径解析

注意事项

  • 在v6.8.0之前,relative属性不存在,所有相对路径都按照"route"模式工作
  • 使用relative="path"时,可以像传统HTML一样使用../来向上导航
  • 绝对路径(以/开头)不受relative属性影响

理解这两种模式的区别可以帮助你在React Router应用中更精确地控制导航行为。