React Router 6 Link 元素相关属性的含义

Question

我正在使用 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;

现在，如果我们参考这里的官方文档https://reactrouter.com/en/main/components/link#relative，导航相对路径的行为在“前进”和“后退”之间是不一致的：

• 单击 EventsPage 中的每个事件（默认为relative='route'）意味着我们应该相对于路由层次结构前进。但事实并非如此。它实际上导航到 EventDetailPage 的路线，这给我一种感觉，它是“相对路径”。如果行为是正确的“相对路由层次结构”，那么它应该导航到哪里？
• 单击后退链接将在路由级别（relative='route'）上正确导航回根布局，从而将主页呈现为索引路由。如果我取消注释 EventDetailPage 组件中的相对属性，它只会在路径段上向后导航。

所以我在这里寻找的是 Link 组件相对属性的正确解释。

Answer 1

单击 EventsPage 中的每个事件（默认情况下relative='route'） 意味着我们应该相对于路由层次结构前进。但事实并非如此。 它实际上导航到 EventDetailPage 的路线，这给了我 认为它是“相对路径”的。如果行为是 正确地“相对路由层次结构”，那么它应该导航到哪里 到？

当启用

"/events"

并使用 relative 链接目标（即

"e1"

和

"e2"

）时，这与使用

"./e1"

和

"./e2"

相同，其中

"." represents the current route (*if using 

route="relative"

*) or the current path (*if using 

route="path"*) ，结果是您正确地从

"/events"

导航到

"/events/:eventId"

。

类似地，如果您改为使用

"../e1"

或

"../e2"

链接目标，则

".."

指的是父级

Route

或路径，对于

RootLayout

为

relative="route"

，对于

"/"

为

relative="path"

，并且结果将导航至

"/e1"

或

"/e2"

。

单击后退链接将正确导航回路线 level (relative='route') 到根布局，渲染 首页作为索引路由。它只会在路径上导航回来 如果我取消注释 EventDetailPage 中的相对属性，则分段 组件。

所以我正在寻找的是对亲戚的正确解释 Link 组件的属性在这里。

我认为文档解释得足够正确，并且还包含一个带有注释的良好代码示例。

链接::相对

默认情况下，链接是相对于路由层次结构的 (relative="route")，所以..将从当前的路线上升一级 上下文路径。有时，您可能会发现您有匹配的 嵌套的 URL 模式没有意义，而您更愿意这样做 使用来自当前上下文路由路径的相对路径路由。你 可以使用relative =“path”选择此行为：

// Contact and EditContact do not share additional UI layout
<Route path="/" element={<Layout />}>
  <Route path="contacts/:id" element={<Contact />} />
  <Route
    path="contacts/:id/edit"
    element={<EditContact />}
  />
</Route>;

function EditContact() {
  // Since Contact is not a parent of EditContact we need to go up one level
  // in the current contextual route path, instead of one level in the Route
  // hierarchy
  return (
    <Link to=".." relative="path">
      Cancel
    </Link>
  );
}

基本要点是，通常链接导航确实发生相对于路由结构，例如从一个Route

到另一个

Route

，但有时您不希望出现这种行为，例如在上面的示例中以及在您更喜欢使用

路径结构的代码中，例如从一条路径导航到另一条路径。

relative="route"

常规的

<Link to="..">Back</Link>

将在路由树中

向上导航到{ path: "events", element: <EventsPage /> },

的父路由，例如返回 

"/"

 并渲染 

RootLayout

 组件。

const router = createBrowserRouter([
  { // <-- (2) to this route
    path: "/",
    element: <RootLayout />,
    children: [
      { index: true, element: <HomePage /> },
      { path: "events", element: <EventsPage /> },
      { // <-- (1) from this route
        path: "events/:eventId",
        element: <EventDetailPage />
      },
      { path: 'events/new', element: <NewEventPage /> },
      { path: 'events/:eventId/edit', element: <EditEventPage /> }
    ]
  }
]);

relative="path"

A

<Link to=".." relative="path">Back</Link>

 将导航

向上 路径段，例如从 "/events/123"

 到 

"/events"

。

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { index: true, element: <HomePage /> },
      {
        path: "events", // <-- (2) to this path
        element: <EventsPage />
      },
      {
        path: "events/:eventId", // <-- (1) from this path
        element: <EventDetailPage />
      },
      { path: 'events/new', element: <NewEventPage /> },
      { path: 'events/:eventId/edit', element: <EditEventPage /> }
    ]
  }
]);