react-navigation web端直接访问嵌套路由header返回按钮缺失问题

问题根因 #

直接访问/deck路径或刷新页面时，React Navigation 默认仅会将当前命中的deck路由加入HomeStack栈中，不会自动补全栈的初始路由dashboard，此时栈内仅有一个路由页面，自然不会展示返回按钮，底部Tab点击无响应也是因为栈结构不符合预期导致的。

解决方案 #

方案1：调整Linking配置（推荐）

仅需在Linking配置中为HomeStack对应的路由节点补充initialRouteName声明，框架就会自动在深层链接访问时补全初始路由到栈中，修改后的配置如下：

const linking: LinkingOptions<RootStackParamList> = {
 prefixes: [Linking.makeUrl('/')],
  config: {
    screens: {
      Root: {
        screens: {
          home: {
            path: '', // 配置该项可省略路径中的/home层级，直接访问/deck即可命中
            initialRouteName: 'dashboard', // 核心配置：指定HomeStack的初始路由
            screens: {
              dashboard: 'dashboard',
              deck: 'deck' 
            },
          }
        },
      }
    }
  }
};

配置完成后，直接访问/deck时，框架会自动构造dashboard -> deck的栈结构，和从首页点击跳转的栈结构完全一致，返回按钮、底部Tab跳转都会恢复正常。

方案2：自定义getStateFromPath（适配旧版本）

如果使用的React Navigation版本不支持上述initialRouteName配置，可以用自定义路由状态生成的方式手动补全栈结构：

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

const linking: LinkingOptions<RootStackParamList> = {
  prefixes: [Linking.makeUrl('/')],
  config: {
    screens: {
      Root: {
        screens: {
          home: {
            path: '',
            screens: {
              dashboard: 'dashboard',
              deck: 'deck' 
            },
          }
        },
      }
    }
  },
  getStateFromPath: (path, options) => {
    const state = defaultGetStateFromPath(path, options);
    if (!state) return state;

    // 匹配HomeStack下仅存在deck路由的场景
    const homeRoute = state.routes[0]?.state?.routes?.find(route => route.name === 'home');
    const homeStack = homeRoute?.state;
    if (homeStack?.routes?.length === 1 && homeStack.routes[0].name === 'deck') {
      // 往栈底插入dashboard路由
      homeStack.routes.unshift({ name: 'dashboard' });
      homeStack.index = 1;
    }

    return state;
  }
};

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