Expo Router在iOS/Android构建时出现路由不匹配Bug，Expo Go正常

项目同时兼容Expo Go与iOS/Android原生构建，但原生构建版本中Expo Router出现路由不匹配错误，Expo Go环境下运行正常，怀疑initialRouteName配置是诱因。

核心问题分析 #

unstable_settings中硬编码的initialRouteName: '(app)'在原生构建环境下可能存在路由解析优先级冲突，加上Tab Layout中异步路由跳转逻辑的时机问题，导致原生构建时路由匹配失败。

修复步骤 #

1. 移除硬编码初始路由配置 #

删掉Root Layout中的unstable_settings配置，避免硬编码初始路由带来的兼容性问题：

// 移除以下代码块
// export const unstable_settings = {
//   initialRouteName: '(app)',
// };

2. 优化Tab Layout的路由校验逻辑 #

将组件初始化阶段的router.replace改为使用Redirect组件，同时增加加载状态判断，符合Expo Router的导航生命周期：

// 修改Tab Layout中的代码
export default function TabLayout() {
  const tabTitles = getAllTabTitles();
  const status = useAuth.use.status();

  const hideSplash = useCallback(async () => {
    await SplashScreen.hideAsync();
  }, []);

  useEffect(() => {
    if (status !== 'idle') {
      setTimeout(() => {
        hideSplash();
      }, 1000);
    }
  }, [hideSplash, status]);

  // 未完成权限校验时显示加载状态
  if (status === 'idle') {
    return null; // 可替换为自定义加载组件
  }

  // 权限校验失败时重定向到登录页
  if (!useAuth.use.isAuthenticated()) {
    return <Redirect href="/login" />;
  }

  return (
    // 原Tabs组件内容保持不变
    <Tabs
      screenOptions={{
        tabBarStyle: { height: 70, paddingTop: 10, paddingBottom: 10 },
      }}
    >
      {/* ... 原有Tab项 ... */}
    </Tabs>
  );
}

3. 确保路由文件结构一致性 #

检查app/(app)目录下的路由文件（如index.tsx、settings.tsx等）是否与Tab Layout中配置的name完全对应，原生构建对路由文件的命名和路径匹配要求更严格。

4. 清理构建缓存 #

原生构建容易残留旧配置缓存，执行以下命令清理后重新构建：

# 清理Expo预构建缓存
npx expo prebuild --clean
# iOS端清理缓存并重新安装依赖
cd ios && pod deintegrate && pod install
# Android端清理构建缓存
cd android && ./gradlew clean

内容的提问来源于stack exchange，提问作者Mohammad Haris Zia