Expo Router手动输入URL跳转报错：导航操作在Root Layout组件挂载前执行

嘿，我仔细看了你的代码和问题描述，这个报错的核心原因是Root Layout还没完全挂载完成，就触发了路由导航操作，再加上Web端布局里漏掉了关键的Slot组件，导致路由系统还没准备好就收到了导航指令。咱们一步步来修复：

1. 先补上Web端布局的Slot组件 #

你在Web大屏幕的布局里只渲染了TopNav和Stack，但没把Slot放进Stack里——这相当于告诉Expo Router“我要渲染导航栈，但没有内容要展示”，路由系统直接就乱了，尤其是手动输入URL的时候。

修改Web端的返回逻辑，把Slot嵌入到Stack内部：

if (isWeb && !isMobileWidth) {
  return (
    <>
      <TopNav />
      <Stack screenOptions={{ headerShown: false }}>
        {/* 必须把Slot放在Stack里，让路由系统能找到当前匹配的页面 */}
        <Slot />
      </Stack>
    </>
  );
}

2. 调整权限导航的触发时机，避免过早跳转 #

你的useEffect里的导航逻辑会在authState、pathname变化时触发，但页面刚加载时authState还是null（正在从AsyncStorage读取用户信息），这时候直接调用router.replace，就会在Root Layout还没挂载好的时候执行导航。咱们加个判断，等authState加载完成再处理：

修改InnerLayout里的useEffect：

useEffect(() => {
  // 等待authState加载完成（不再是null）再处理路由跳转
  if (authState?.authenticated === null) return;

  const inAuthGroup = segments[0] === "(pages)";
  if (!authState.authenticated && inAuthGroup) {
    router.replace("/login");
  } else if (authState.authenticated && pathname === "/login") {
    router.replace("/dashboard");
  }
}, [authState, pathname, segments, router]);

3. 优化加载状态的布局（可选但推荐） #

现在你在加载状态只返回<Slot />，可以换成加载指示器，同时保留Slot确保路由系统正常初始化：

import { ActivityIndicator, View } from "react-native";

// ...

if (authState?.authenticated === null) {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <ActivityIndicator size="large" color="red" />
      {/* 依然保留Slot，避免路由系统报错 */}
      <Slot />
    </View>
  );
}

4. 确认路由分组的正确性 #

要确保你的(pages)分组确实包含了需要权限验证的页面（比如dashboard），如果dashboard不在(pages)文件夹下，那segments[0] === "(pages)"的判断就会失效，权限逻辑根本起不到作用。

为什么手动输入URL才会出问题？ #

当你手动输入URL时，Expo Router会直接尝试匹配对应路由并渲染，而不是通过应用内的导航跳转。这时候如果Root Layout还在等待AuthContext的状态加载，路由系统还没完全初始化，就收到了router.replace的指令，自然就会抛出“导航操作在Root Layout挂载前执行”的错误。

按照上面的步骤修改后，手动输入URL的报错问题应该就能解决了。

内容来源于stack exchange