React Navigation V6 Deeplink非id参数无法解析问题

可能的原因 #

这种情况通常是由以下配置细节疏漏导致：

• Linking配置参数映射不完整：react-navigation V6中，Deeplink参数的解析依赖linking.config.screens的精确配置，若参数名未被正确映射，会出现导航成功但参数丢失的情况。
• iOS缓存残留：修改Deeplink规则后，iOS可能缓存旧配置，导致新参数名无法被识别。
• 屏幕配置冲突：如果在Stack.Screen的options中单独设置了path，且与linking配置的参数名不一致，会引发参数解析异常。

解决步骤 #

1. 完善Linking配置

确保linking配置的层级、参数名与屏幕期望完全匹配：

const linking = {
  prefixes: ['https://example.com'],
  config: {
    screens: {
      Home: { // 对应你的Bottom Tab名称
        screens: {
          Site: { // 对应栈内的Site屏幕名称
            path: 'places/:uid',
            // 显式声明参数，确保解析优先级
            params: { uid: undefined }
          }
        }
      }
    }
  }
};

2. 确认导航容器配置

保证NavigationContainer已正确挂载linking配置：

import { NavigationContainer } from '@react-navigation/native';

<NavigationContainer linking={linking} fallback={<LoadingScreen />}>
  {/* 你的Bottom Tab导航组件 */}
</NavigationContainer>

3. 清除iOS缓存

修改Deeplink规则后，卸载并重装App，避免iOS缓存旧链接规则；使用模拟器时可直接重置模拟器内容和设置。

4. 统一屏幕Path配置

若在Stack.Screen的options中设置了path，需确保其参数名与linking配置完全一致：

<Stack.Screen
  name="Site"
  component={SiteScreen}
  // 注释或修改为与linking一致的配置
  // options={{ path: 'places/:id' }}
/>

5. 验证参数获取

在Site屏幕组件中，通过useRoute()正确获取参数：

import { useRoute } from '@react-navigation/native';

const SiteScreen = () => {
  const route = useRoute();
  console.log('Deeplink参数:', route.params?.uid); // 应输出"place-name"
  // ...
};

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