如何在Expo Router的根布局(_layout.tsx)中实现重定向？

嘿，我刚好折腾过类似的需求，给你梳理下具体怎么实现，避避我踩过的坑！

核心思路 #

我们要做的就是用你的useUser钩子监听用户认证状态，结合Expo Router的useRouter来触发页面跳转，同时一定要处理好初始加载状态，不然很容易出现闪屏或者无限跳转的问题。

完整代码示例 #

先给你看补全后的_layout.tsx代码，我会在里面加注释说明关键部分：

import { Slot, useRouter } from "expo-router";
import { SuperwallProvider } from "@/lib/SuperwallContext";
import { Providers } from "@/providers"; // 假设这是你的全局状态Providers
import { useUser } from "@/hooks/useUser";
import { useEffect, View } from "react";
import { ActivityIndicator } from "react-native";

export default function RootLayout() {
  const router = useRouter();
  // 从useUser获取认证状态、加载状态
  const { isAuthenticated, loading } = useUser();

  // 监听认证状态变化，执行重定向
  useEffect(() => {
    // 加载状态下啥也不做！这步超级重要，不然初始渲染会乱跳
    if (loading) return;

    // 根据认证状态跳转页面
    const targetRoute = isAuthenticated ? "/app" : "/onboarding";
    
    // 用replace代替push，避免导航栈里残留根布局页面，提升体验
    if (router.canGoBack()) {
      router.replace(targetRoute);
    } else {
      router.push(targetRoute);
    }
  }, [isAuthenticated, loading, router]);

  // 加载状态时显示个加载动画，别让用户看空白页
  if (loading) {
    return (
      <Providers>
        <SuperwallProvider>
          <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <ActivityIndicator size="large" color="#0000ff" />
          </View>
        </SuperwallProvider>
      </Providers>
    );
  }

  // Slot是用来渲染子路由的，重定向后其实不会走到这，但还是保留着更稳妥
  return (
    <Providers>
      <SuperwallProvider>
        <Slot />
      </SuperwallProvider>
    </Providers>
  );
}

关键细节（避坑指南） #

• 必须处理loading状态：初始时useUser可能正在从本地存储/后端拉取用户信息，这时候还不知道用户是登录还是未登录，直接跳转的话会出现“跳去引导页又跳回app”的闪屏，体验极差。
• 用replace而非push：replace会把当前的根布局页面从导航栈里移除，用户在app页按返回键就不会回到根布局，而是直接退出app（或者回到之前的页面），逻辑更合理。
• 别直接用Redirect组件：根布局是所有路由的父组件，直接返回Redirect会触发无限循环——路由变化后根布局重新渲染，又返回Redirect，周而复始。
• 确保useUser稳定：如果你的useUser钩子频繁触发状态更新，会导致频繁跳转，所以要确保它只在认证状态真的变化时才更新。

内容来源于stack exchange