在React Router v6中,<Link>
组件的relative
属性用于控制相对路径的解析方式,有两种模式:"route"
(默认)和"path"
。
relative="route"
(默认模式)// 当前URL: /blog/post/123
<Link to="edit" relative="route" />
// 将导航到: /blog/post/123/edit
relative="path"
// 当前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>
);
}
使用relative="route"
(默认)的情况:
使用relative="path"
的情况:
relative
属性不存在,所有相对路径都按照"route"
模式工作relative="path"
时,可以像传统HTML一样使用../
来向上导航/
开头)不受relative
属性影响理解这两种模式的区别可以帮助你在React Router应用中更精确地控制导航行为。