React Native打开深度链接时如何阻止stack navigator自动路由跳转

解决方案 #

你遇到的问题本质是React Navigation默认开启了深度链接自动解析逻辑，会优先拦截所有匹配你配置的域名前缀的链接，尝试自动映射到路由，优先级高于你自定义的Linking监听逻辑。可以通过以下两种方案解决，不需要修改URL也不需要新增slr相关路由：

方案1：自定义深度链接解析逻辑（推荐） #

在NavigationContainer的linking配置中新增getStateFromPath钩子，拦截所有/slr/开头的路径，直接返回null让导航器放弃处理该链接，你可以在拦截逻辑中自行处理短链业务：

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

// 你的短链处理逻辑
const handleSlrShortLink = (path) => {
  // 这里写你之前放在Linking.canOpenURL里的自定义逻辑
  const shortCode = path.split('/slr/')[1];
  // 后续业务处理
}

const linking = {
  prefixes: ['https://my-site.com', 'my-site.com://'], // 替换成你配置的深度链接前缀
  getStateFromPath: (path, options) => {
    // 拦截短链路径
    if (path.startsWith('/slr/')) {
      handleSlrShortLink(path);
      // 返回null告知导航器不需要处理本次深度链接跳转
      return null;
    }
    // 其他路径走默认的路由解析逻辑
    return Linking.getStateFromPath(path, options);
  }
};

function App() {
  return (
    <NavigationContainer linking={linking}>
      {/* 原有导航树结构 */}
    </NavigationContainer>
  );
}

方案2：捕获未处理的导航动作 #

如果不想修改现有linking解析规则，可以直接在NavigationContainer的onUnhandledAction回调中拦截slr相关的报错跳转，直接忽略即可：

<NavigationContainer
  linking={linking}
  onUnhandledAction={(action) => {
    // 匹配slr相关的未处理导航动作，不抛出错误也不执行跳转
    if (action.type === 'NAVIGATE' && action.payload?.name === 'slr') {
      return;
    }
    // 其他未处理动作保留原有报错逻辑
    console.error('未处理的导航动作:', action);
  }}
>
  {/* 原有导航树结构 */}
</NavigationContainer>

之前方案不生效的原因 #

你用的DeepLinking.addRoute是第三方深度链接库的API，优先级低于React Navigation内置的深度链接解析逻辑，所以导航器会先处理跳转抛出错误，你的自定义回调后执行也无法阻止之前的跳转行为。

内容的提问来源于stack exchange，提问作者JESTER 2-6