React 导航：`useLinkProps` 未在浏览器中生成正确的链接

Question

我正在使用react-navigation v6和expo 49。Web的Bundler是webpack。

我需要反应导航方面的帮助。它是围绕如何生成链接的。我创建了一个链接配置，其配置如下

[screenNames.itemDetail]: {
  path: "item-detail/:itemId",
  exact: true,
}

我正在使用

useLinkProps

在网络上生成 href 链接。这是代码片段

const { onPress: onLinkPress, ...linkProps } = useLinkProps({
  to: {
    screen: screenNames.itemDetail,
    params: {
      itemId: item.id,
      origin: "search",
    },
  },
});

如果我在同一浏览器选项卡上并单击生成的链接。我转到正确的链接，即

/item-detail/40?origin=search

。但是，如果我使用

⌘+click

或

right click to open in new tab

，我得到的链接是

/item-detail?itemId=40&origin=search

。请注意，

itemId

现在是一个参数。

如何确保生成的链接始终是

item-detail/40

？

这是重现此问题的小吃链接https://snack.expo.dev/@khageshfoodapp/hello-react-navigation-|-react-navigation

我不想自己创建确切的链接字符串。我知道我总是可以自己序列化查询字符串的参数，并为反应导航提供准确的路径。通过这样做，我放松了对参数和屏幕名称的严格类型检查。

Answer 1

我意识到我需要将与导航器中完全相同的结构传递给

useLinkProps

。所以，如果我这样做，那么一切都很好。

useLinkProps({
  to: {
    screen: "main-drawer",
    params: {
      screen: screenNames.itemDetail,
      params: {
        itemId: item.id,
        origin: "search",
      },
    },
});