React Navigation Drawer 刷新时URI:id参数重复导致路由异常问题咨询

React Navigation 的深度链接路由匹配是按嵌套导航层级逐层拼接路径段的：

• 现有代码仅在最外层 NavigationContainer 配置了 Dashboard 页面的路径规则，没有对 Dashboard 内部嵌套的 Drawer 导航做对应的 URL 同步配置
• 内层 Drawer 的每一个 Screen 直接使用天的id值作为路由 name，当内层 Drawer 完成路由匹配后，会自动把当前选中的 Screen name（也就是id值）作为新的路径段，拼到外层已经生成的 /dashboard/{id} 路径后面，最终形成 /dashboard/{id}/{id} 的重复路径。第二次刷新时因为没有匹配到对应路径的路由规则，应用就会触发回退到首页的逻辑。

方案一：禁用内层Drawer的URL同步（改动最小） #

所有路由参数本身通过最外层Dashboard路由的:id?参数承载，内层Drawer只负责侧边栏的内容展示，不需要把自身的内部路由状态同步到全局URL。直接给 Drawer.Navigator 添加配置即可阻断路径重复拼接：

<Drawer.Navigator
  {...{
    drawerContent: props => <ContentComponent {...{...props, fetchPage}} />,
    drawerType: 'permanent',
    openByDefault: true,
    initialRouteName,
    // 新增配置：禁用内层导航的URL同步能力
    linking: { enabled: false },
  }}
>

配置生效后的效果：

• 内层Drawer的路由切换不会主动修改浏览器地址栏的URL，从根源上避免把id值重复拼接到路径里
• 现有的通过 route.params.id 读取参数、设置Drawer初始选中项的逻辑完全不需要改动，刷新时依然可以正常从URL读取外层配置的:id参数，初始化抽屉选中状态
• 抽屉本身的内容切换、选中状态逻辑完全不受影响

方案二：完善全局路由的嵌套映射 #

如果需要保留内层路由的URL同步能力，需要把内层Drawer的路由规则补全到全局linking配置里，明确告诉导航库内层路由的哪个路径段需要和外层的参数对齐，不要自动追加新的路径段：

const linking = {
  prefixes: ['https://localhost:19006'],
  config: {
    screens: {
      Dashboard: {
        path: 'dashboard',
        // 配置Dashboard内部嵌套的Drawer的路由映射
        screens: {
          // 把内层动态匹配的id路由映射为空路径段，告知导航库匹配到该路由时不要往URL后面追加内容
          ':dayId?': ''
        }
      },
    },
  },
};

这种配置下，内层Drawer的路由状态依然会同步到URL，但不会因为重复匹配id值生成两段相同的路径段。

• 不要让两层嵌套导航的路由参数值、路由name完全重叠，不然很容易出现同一段内容被重复解析、重复拼接到URL的问题
• 不要直接把动态生成的id值作为Screen name 又同时参与全局路由的路径匹配：要么把这部分动态路由的映射规则提前写进全局linking配置，要么就禁用这部分内层导航的URL同步能力，不然导航库无法判断哪些内容是已经匹配过的路径段，就会出现重复拼接的问题

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