Expo Router上下文失效：根布局挂载前导航报错求助

问题背景 #

已完成Expo Router基础配置，根布局文件_layout.js代码如下：

import { Slot } from "expo-router";
import { useFonts } from "expo-font";
import { Provider } from "../context/auth";
import { Slot } from "expo-router";
import { Provider } from "../context/auth";

export default function Layout() {
  return (
    <Provider>
      <Slot />
    </Provider>
  );
}

严格按照官方文档创建Provider与auth上下文后，出现如下报错：

ERROR Error: Attempted to navigate before mounting the Root Layout component. Ensure the Root Layout component is rendering a Slot, or other navigator on the first render.

推测原因是useEffect在根布局组件返回前触发，导致无法调用router.replace()。

解决方案 #

1. 延迟导航至根布局挂载完成后 #

导航操作必须等待根布局的Slot完成挂载，因此需要将导航逻辑包裹在useEffect中，确保在组件挂载后执行。可以在Auth上下文的消费组件中添加守卫逻辑：

import { useRouter } from 'expo-router';
import { useAuth } from '../context/auth';
import { useEffect } from 'react';
import { ActivityIndicator, View } from 'react-native';

export default function AuthGuard() {
  const { isAuthenticated, isLoading } = useAuth();
  const router = useRouter();

  useEffect(() => {
    // 状态就绪后再执行导航
    if (!isLoading) {
      router.replace(isAuthenticated ? '/home' : '/login');
    }
  }, [isAuthenticated, isLoading, router]);

  // 状态加载中显示过渡UI
  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return null;
}

将该守卫组件放在根布局的Slot同级或入口路由中，确保导航逻辑在根布局挂载后触发。

2. 确保根布局优先渲染Slot，避免异步阻塞 #

如果根布局中有异步操作（如字体加载），需避免因异步状态延迟渲染Slot。修改根布局代码，确保即使异步操作未完成，也能渲染过渡UI或直接渲染Slot：

import { Slot } from "expo-router";
import { useFonts } from "expo-font";
import { Provider } from "../context/auth";
import { ActivityIndicator, View } from 'react-native';

export default function Layout() {
  const [fontsLoaded] = useFonts({
    // 你的字体配置，比如：
    // Roboto: require('../assets/fonts/Roboto-Regular.ttf'),
  });

  // 字体加载中显示过渡UI，不阻塞Provider和Slot的渲染流程
  if (!fontsLoaded) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <Provider>
      <Slot />
    </Provider>
  );
}

3. 调整Auth上下文初始化逻辑 #

将Auth状态初始化与导航操作分离，先完成状态读取（如从本地存储获取token），再通过状态监听触发导航：

Auth上下文示例：

import { createContext, useContext, useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const AuthContext = createContext();

export function Provider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 异步初始化Auth状态
    const initAuth = async () => {
      const token = await AsyncStorage.getItem('authToken');
      setIsAuthenticated(!!token);
      setIsLoading(false);
    };
    initAuth();
  }, []);

  return (
    <AuthContext.Provider value={{ isAuthenticated, isLoading }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

入口路由（如index.js）中处理导航：

import { useRouter } from 'expo-router';
import { useAuth } from '../context/auth';
import { ActivityIndicator, View } from 'react-native';

export default function Index() {
  const { isAuthenticated, isLoading } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!isLoading) {
      router.replace(isAuthenticated ? '/home' : '/login');
    }
  }, [isAuthenticated, isLoading, router]);

  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return null;
}

核心思路 #

报错本质是导航触发时机早于根布局Slot的挂载完成时间，因此解决方案的核心是：

• 确保根布局始终渲染Slot或过渡UI，避免出现无导航容器的状态
• 将导航逻辑延迟至根布局挂载完成、Auth状态初始化就绪后执行

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