Expo Router通用链接打开嵌套页面后返回按钮异常及多Tab初始路由需求

问题描述 #

通过通用链接进入Expo应用的嵌套屏幕时，跳转功能正常，但执行router.back()的返回按钮无法按预期工作：比如从tabs/icecreams/recipes/2点击返回时，会跳转到tabs/burgers而非tabs/icecreams，甚至陷入导航循环。核心原因是通用链接打开应用时没有初始化对应Tab的导航历史，而Expo文档提到的unstable_settings.initialRouteName无法直接适配多Tab场景。

解决方案 #

1. 为每个Tab配置独立初始路由栈 #

在每个Tab的布局文件（如tabs/icecreams/_layout.tsx、tabs/burgers/_layout.tsx）中，通过Stack组件的unstable_settings指定该Tab的初始路由，确保进入嵌套页面时，该Tab的首页已被加入导航栈：

// tabs/icecreams/_layout.tsx
import { Stack } from 'expo-router';

export default function IceCreamsLayout() {
  return (
    <Stack
      unstable_settings={{
        initialRouteName: 'index', // 绑定当前Tab的首页
      }}
    >
      <Stack.Screen name="index" options={{ title: '冰淇淋' }} />
      <Stack.Screen name="recipes/_layout" />
    </Stack>
  );
}

对burgers的布局文件做同样配置，这样每个Tab的嵌套路由都会基于自身首页初始化导航栈，router.back()就能正确回退到当前Tab的上一级页面。

2. 手动构建导航历史（推荐） #

在嵌套详情页面中，通过useEffect检查导航栈状态，若为通用链接打开的单页面栈，手动构建包含父页面的历史：

// tabs/icecreams/recipes/[recipe]/index.tsx
import { useRouter, useNavigationContainerRef } from 'expo-router';
import { useEffect } from 'react';

export default function RecipeDetail() {
  const router = useRouter();
  const navigationRef = useNavigationContainerRef();

  useEffect(() => {
    const setupHistory = async () => {
      const rootState = navigationRef.current?.getRootState();
      // 判断是否为通用链接打开的单页面场景
      if (rootState?.routes.length === 1) {
        // 先跳转到当前Tab首页，再切回详情页，补全导航历史
        await router.push('/tabs/icecreams');
        router.push(`/tabs/icecreams/recipes/${router.params.recipe}`);
      }
    };
    setupHistory();
  }, [router.params.recipe]);

  const handleBack = () => {
    router.back();
  };

  return (
    <div>
      {/* 页面内容 */}
      <button onClick={handleBack}>返回</button>
    </div>
  );
}

3. 兜底跳转（临时方案） #

如果不想修改导航栈，可在返回按钮中判断是否能回退，不能则直接跳转到父页面：

import { useRouter } from 'expo-router';

export default function RecipeDetail() {
  const router = useRouter();

  const handleBack = () => {
    if (router.canGoBack()) {
      router.back();
    } else {
      // 直接跳转到当前Tab的首页
      router.replace('/tabs/icecreams');
    }
  };

  return (
    <button onClick={handleBack}>返回</button>
  );
}

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