React Navigation: `useLinkProps` not generating correct link in browser

Question

I am using react-navigation v6 and expo 49. Bundler for web is webpack.

I need help with react navigation. It is around how links are generated. I have created a linking config which has a config like

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

I am using useLinkProps to generate href links on web. Here is that code snippet

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

If I am on same browser tab and click on the link that gets generated. I go to correct link which is /item-detail/40?origin=search. However, if I use ⌘+click or right click to open in new tab, the link that I get is /item-detail?itemId=40&origin=search. Notice that itemId is a param now.

How do I make sure that link that is generated is always item-detail/40?

Here is a snack link that reproduces this issue https://snack.expo.dev/@khageshfoodapp/hello-react-navigation-|-react-navigation

I don't want to create the exact link string myself. I know I can always serialize params for query string myself and give react navigation the exact path. By doing this, I loose strict type checking for params and screen names.

Answer 1

I realized that I needed to pass exact same structure to useLinkProps as we have in our navigator. So, if I do below then everything is fine.

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