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应用中更精确地控制导航行为。