React Router 6中Link组件relative属性的行为疑问解析请求

我正在使用React Router 6.4+（具体版本为6.22.1），路由配置如下：

const router = createBrowserRouter([
  { path: '/',
    element: <RootLayout />,
    children: [
      { index: true, element: <HomePage /> },
      { path: 'events', element: <EventsPage/> },
      { path: 'events/:eventId', element: <EventDetailPage /> },
      { path: 'events/new', element: <NewEventPage /> },
      { path: 'events/:eventId/edit', element: <EditEventPage /> }
    ]
  }
])

function App() {
  return <RouterProvider router={router}/>;
}

我的EventsPage组件代码如下：

const DUMMY_EVENTS = [
  {
    id: 'e1',
    title: 'Some events'
  },
  {
    id: 'e2',
    title: 'Another event'
  }
];

function EventsPage() {
  return (
    <>
      <h1>Events Page</h1>
      <ul>
        {DUMMY_EVENTS.map(event => <li key={event.id}>
          <Link to={event.id}>{event.title}</Link>
        </li>)}
      </ul>
    </>
  );
}

export default EventsPage;

点击事件会进入EventDetailPage组件，其代码如下：

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

function EventDetailPage() {
  return (
    <>
      <h1>EventDetailPage</h1>
      <Link
        to='..'
        // relative='path'
      >
        Back
      </Link>
    </>
  );
}

export default EventDetailPage;

遇到的疑问：

• 在EventsPage中点击事件链接（默认relative='route'），实际导航到了EventDetailPage，看似是路径相对的行为，若严格按路由层级相对的话，应该导航到哪里？
• 点击EventDetailPage中的返回链接（默认relative='route'）会回到根布局的HomePage，只有设置relative='path'时才会按路径段返回上一级（EventsPage），这是为什么？

relative属性的核心解析 #

React Router的relative属性决定了相对路径导航的参照基准，有两个可选值：'route'（默认）和'path'

1. relative='route'（默认行为）

导航时以当前组件所在的路由节点为参照基准：

• 在EventsPage中，它对应的路由是{ path: 'events', element: <EventsPage/> }，属于根路由的子路由。当使用<Link to={event.id}>时，to的值会匹配当前路由可关联的子路由规则——因为events/:eventId是根路由的子路由，路径前缀与当前路由路径重合，所以最终导航到events/${event.id}（即EventDetailPage）。这里的“路由层级相对”是基于路由配置的关联关系，而非URL路径的表层层级。
• 在EventDetailPage中，它对应的路由是{ path: 'events/:eventId', element: <EventDetailPage /> }，这个路由的父路由是根路由/（注意：你的路由配置里，events和events/:eventId是同级的根路由子路由，并非父子关系）。所以当使用<Link to='..'>时，..表示回到当前路由的父路由（根路由/），而根路由的index路由是HomePage，因此会跳转到HomePage。

2. relative='path'

导航时以当前浏览器地址栏的URL路径为参照基准，完全按照路径段的层级来处理：

• 在EventDetailPage中，当前地址是/events/e1，使用<Link to='..' relative='path'>时，..表示移除URL的最后一个路径段，回到/events，也就是EventsPage，这就是按路径段返回的行为。

内容的提问来源于stack exchange，提问作者Sy Pham