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

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

主要区别

详细解释

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)

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