如何阻止React Navigation PWA的URL查询参数被移除？

可能原因及对应解决方法 #

1. React Navigation链接配置未显式映射查询参数 #

虽然官方文档提到查询参数会自动解析，但生产环境下的路由解析逻辑可能更严格，未显式定义参数映射会导致参数被忽略。

解决方法：修改linking配置中的screens，为每个屏幕显式指定参数与查询字段的映射：

const config = {
  screens: {
    FinancialPlanScreen: {
      path: 'financialPlan',
      params: {
        utm_source: 'utm_source',
        utm_campaign: 'utm_campaign',
      },
    },
    FinancialPlanPurchaseConfirmationScreen: {
      path: 'purchaseConfirmation',
      params: {
        sessionId: 'sessionId',
        utm_source: 'utm_source',
        utm_campaign: 'utm_campaign',
      },
    },
    // ...其他屏幕配置
  }
}

const linking = {
  prefixes: [],
  config
}

2. 生产环境服务器路由配置丢失查询参数 #

如果你的PWA部署在Netlify、Nginx等服务器上，路由重写规则可能未保留URL查询参数，导致React Navigation无法接收到参数。

解决方法：

• Netlify：在项目根目录的_redirects文件中确保规则保留查询参数：

  /* /index.html 200
  

  （Netlify默认会保留查询参数，但如果自定义了规则，需确认未丢弃）
• Nginx：修改配置文件中的try_files指令，添加$query_string：

  location / {
    try_files $uri $uri/ /index.html?$query_string;
  }
  

3. Service Worker缓存策略干扰URL解析 #

部分PWA的Service Worker缓存规则会忽略查询参数，导致加载缓存页面时参数丢失。

解决方法：

• 临时禁用Service Worker（在浏览器开发者工具中勾选"Disable cache"或卸载PWA重新加载），测试参数是否正常保留。
• 若确认是Service Worker问题，修改缓存策略，确保带不同查询参数的URL被视为不同请求，例如调整Workbox的缓存规则。

4. React Navigation版本存在兼容性问题 #

旧版本的React Navigation在Web生产环境中可能存在查询参数解析的bug。

解决方法：升级React Navigation及相关依赖到最新稳定版，然后重新构建部署。

内容的提问来源于stack exchange，提问作者vlntine