如何在 React Router v6 中构建 link 到 "neighbour" 资源？

Question

我有一个使用 React Router v6 的 React 应用程序。我有一条路由与具有多个路径参数的路径匹配，如下所示：

/event/:eventId/resource/:resourceId

这些由嵌套路由表示，例如：

<Route path="/event/:eventId/*" element={<Event />}>
  <Route path="resource/:resourceId" element={<Resource />} />
</Route>

我有多个事件和多个资源。单个资源可能出现在多个事件的上下文中，对应于这样的 url：

/event/event-1/resource/resource-1
/event/event-2/resource/resource-1

单个资源链接到其他资源。我希望能够在同一事件的上下文中在资源页面上建立指向其他链接资源的链接。

所以在页面上：

/event/event-1/resource/resource-1,

呈现我的 Resource 组件，并且鉴于 resource-1 具有指向 resource-2 和 resource-3 的链接，我可能想链接到这些网址：

/event/event-1/resource/resource-2
/event/event-1/resource/resource-3

但是，如果可以避免的话，我不想在 Resource 组件中对这些链接的路径进行硬编码。

React Router 6 允许我创建嵌套路由和链接，因此我可以建立长链接而无需知道到那一点的完整路径。它是否提供了一种无需对完整路径进行硬编码即可创建这些链接的好方法？

Answer 1

您可以利用 generatePath、and/or 编写自己的函数助手：

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

export function getResourcePath({ eventId, resourceId }) {
  return generatePath('/event/:eventId/resource/:resourceId', { eventId, resourceId });
}

在你的组件中：

import { getResourcePath } from '...';

...

<Link to={getResourcePath(...)}/>

如何在 React Router v6 中构建 link 到 "neighbour" 资源？

How can I construct a link to a "neighbour" resource in react router v6?

reactjs

react-router-dom