Expo Router导航报错：Root Layout未挂载前尝试导航求助

错误原因 #

当前代码的核心问题是Root Layout组件在首次渲染时，没有始终提供导航容器（如Stack）。当isSignedIn为true时，直接渲染了InitialScreen组件，跳过了导航器的初始化，导致Link和useRouter无法获取导航上下文，触发导航错误。

解决方案 #

调整RootLayout的结构，确保无论登录状态如何，始终渲染导航容器，并将InitialScreen注册为导航器的一个页面，再根据登录状态动态跳转。

修改后的_layout.tsx代码 #

import React, { useState, useEffect } from 'react';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { useFonts } from 'expo-font';
import { Stack, useRouter } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';

// Components
import CustomHeaderNav from '@/components/customHeaderNav';

export {
  ErrorBoundary,
} from 'expo-router';

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
    ...FontAwesome.font,
  });

  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return <RootLayoutNav />;
}

function RootLayoutNav() {
  const [isSignedIn] = useState(true);
  const router = useRouter();

  // 根据登录状态动态跳转页面
  useEffect(() => {
    if (isSignedIn) {
      router.replace('/initialScreen');
    } else {
      router.replace('/index2');
    }
  }, [isSignedIn]);

  return (
    <Stack>
      {/* 注册初始页，隐藏头部 */}
      <Stack.Screen 
        name="initialScreen" 
        options={{ headerShown: false }} 
      />
      {/* 注册index2页面，自定义头部 */}
      <Stack.Screen 
        name="index2" 
        options={{ 
          headerShown: true,
          header: () => <CustomHeaderNav />,
        }} 
      />
    </Stack>
  );
}

关键修改点 #

1. 始终渲染导航容器：RootLayoutNav现在固定返回Stack导航器，确保导航系统在应用启动时就完成初始化，满足Expo Router的要求。
2. 注册所有页面：将initialScreen和index2都注册为Stack的屏幕，让导航系统能识别这些路由。
3. 动态跳转逻辑：通过useEffect根据isSignedIn状态，使用router.replace跳转到对应页面，替代原来的条件渲染方式。

验证修改 #

修改完成后，InitialScreen中的Link组件将能正常获取导航上下文，点击"Entrar"按钮即可顺利跳转到index2页面，不会再触发导航错误。

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