React Navigation 6+ 如何为单个屏幕配置多个DeepLink路径？

数组路径支持 #

React Navigation 6完全支持使用数组定义多个深层链接路径，你示例中的写法是有效的。只需将path设置为字符串数组，每个元素对应一个要匹配的路径，所有路径都会映射到同一个屏幕，路径中的参数（如:id）也会被正确解析并传递给屏幕的路由参数。

正确实现代码如下：

export const navigationConfig = {
  prefixes: supportedDeepLinkURLs,
  config: {
    screens: {
      Root: {
        path: '',
        screens: {
          Article: {
            path: [
              'teams/first-team/content/:id',
              'teams/handball/content/:id',
              'teams/club/content/:id',
            ],
            // 注：RN6默认匹配前缀路径，exact: false 通常无需额外设置，若需严格匹配可按需添加
          },
          // 其他屏幕配置
        }
      }
    }
  }
};

正则表达式支持 #

React Navigation 6 没有直接提供在path中写入正则表达式的选项，但可以通过自定义getStateFromPath函数实现复杂的正则匹配逻辑，适合处理动态性更强的路径规则（比如匹配teams/*/content/:id这类任意子路径的场景）。

实现步骤： #

1. 自定义路径解析函数，结合正则匹配构建路由状态：

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

const customGetStateFromPath = (path, options) => {
  // 匹配 teams/任意字符串/content/数字ID 的路径
  const articleRouteMatch = path.match(/^teams\/.+\/content\/(\d+)$/);
  
  if (articleRouteMatch) {
    // 手动构建路由状态，指向Article屏幕并传递id参数
    return {
      routes: [
        {
          name: 'Root',
          routes: [
            {
              name: 'Article',
              params: { id: articleRouteMatch[1] },
            },
          ],
        },
      ],
    };
  }

  // 非目标路径使用默认解析逻辑
  return getStateFromPath(path, options);
};

2. 在NavigationContainer中配置该自定义函数：

<NavigationContainer
  linking={{
    prefixes: supportedDeepLinkURLs,
    config: navigationConfig.config,
    getStateFromPath: customGetStateFromPath,
  }}
>
  {/* 你的导航组件结构 */}
</NavigationContainer>

选择建议 #

• 如果只是匹配有限个固定路径，使用数组路径是最简单直接的方案，无需额外逻辑。
• 如果需要匹配动态、不确定的路径规则，自定义getStateFromPath+正则表达式可以满足更灵活的需求。

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