使用react-navigation隐藏url中的路由参数

Question

我正在将 ReactNative 移动应用程序改编为 ReactNative Web。该应用程序完成了react-navigation。

目前，每次我设置路由的参数（通过navigate或setParams）时，这些参数都会显示在 URL 中。我最终得到的网址看起来很糟糕，如下所示： http://localhost:19006/me/undefined?user=%5Bobject%20Object%5D

或者 URL 包含与用户无关的数据，并且通常看起来很混乱。

有没有办法不显示 URL 中的路由参数？

Answer 1

如果您不想在 URL 中包含此数据，则应重新考虑 params 是否适合存放此数据。如果您认为 URL 包含不相关的数据，则表明该数据不属于导航状态。

如果您直接从 URL 访问屏幕，它的呈现方式应该与您以编程方式导航到该屏幕时的呈现方式相同。如果您在参数中传递某些内容，则意味着屏幕需要该信息才能正确呈现，如果您从 URL 中删除它，则该信息就会丢失。考虑一下可以直接从 URL 打开页面，无论是在 Web 上还是通过深层链接。如果所需的数据不可用，那么它就不会起作用。

在您的情况下，似乎您正在传递一个完整的用户对象（也许不是，没有代码很难说）。理想情况下，该对象应该位于您的全局存储中而不是参数中，并且您应该只在参数中传递用户 ID。然后，您应该使用该 id 从全局存储中授予完整对象，或者如果尚未获取对象（如果需要），则触发数据获取。

您没有在问题中指定 React Navigation 的版本。stringify在 v5 中，您可以自定义如何将参数字符串化为 URL，以及如何使用和选项解析它们parse：

const linking = {
  screens: {
    Profile: {
      path: 'user/:id',
      parse: {
        id: (id) => id.replace(/^@/, '')
      },
      stringify: {
        id: (id) => `@{id}`,
      },
    },
  },
};

这应该可以帮助您使 URL 看起来更漂亮，并处理参数不是简单字符串的情况。但是，您不能完全省略 URL 中的参数，因为它们是屏幕渲染所必需的数据。

更多详细信息：https://reactnavigation.org/docs/configuring-links#passing-params