React Native Expo Router受保护路由问题：登录后返回键回到登录页

登录后点击返回回到登录页的核心原因是：登录页仍保留在导航栈中，普通的navigate跳转只是在栈顶添加新页面，并未清除之前的登录页记录。在Tabs布局中添加重定向无效，是因为Tabs组件属于栈的一部分，无法修改上层栈的结构。以下是针对性解决方案：

1. 登录成功时重置导航栈 #

在登录逻辑中，替换普通的navigation.navigate为navigation.reset，直接将Tabs设为导航栈的根页面，彻底移除登录页的栈记录。

示例代码（登录组件内）：

import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
import { useNavigation } from 'expo-router';

const handleLogin = async (email, password) => {
  const auth = getAuth();
  try {
    await signInWithEmailAndPassword(auth, email, password);
    // 重置导航栈，直接进入Tabs页面
    const navigation = useNavigation();
    navigation.reset({
      index: 0,
      routes: [{ name: '(tabs)' }], // 替换为你的Tabs路由名称
    });
  } catch (error) {
    console.error('登录失败:', error);
  }
};

2. 在RootLayout中做全局路由保护 #

通过AuthProvider监听用户状态，在RootLayout中根据登录状态重置路由栈，避免未授权访问或残留登录页记录。

修改RootLayout.js：

import { useAuth } from '../contexts/AuthProvider';
import { Stack, Redirect } from 'expo-router';
import LoadingScreen from '../components/LoadingScreen';

export default function RootLayout() {
  const { user, loading } = useAuth();

  if (loading) return <LoadingScreen />;

  // 未登录时重定向到登录页
  if (!user) return <Redirect href="/(auth)/login" />;

  // 已登录时，将Tabs设为栈的唯一根页面
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

同步修改AuthProvider，监听状态变化时重置路由：

import { useState, useEffect, createContext } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import { useRouter } from 'expo-router';

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const router = useRouter();

  useEffect(() => {
    const auth = getAuth();
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setLoading(false);
      setUser(currentUser);
      if (currentUser) {
        // 登录状态下直接替换路由到Tabs，清除栈记录
        router.replace('/(tabs)');
      } else {
        // 登出时重定向到登录页
        router.replace('/(auth)/login');
      }
    });
    return unsubscribe;
  }, []);

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

3. 简化(auth)与Tabs布局的路由配置 #

• (auth)/_layout.js：仅作为未登录状态的独立栈，无需额外重定向逻辑

import { Stack } from 'expo-router';

export default function AuthLayout() {
  return (
    <Stack>
      <Stack.Screen name="login" options={{ headerShown: false }} />
    </Stack>
  );
}

• (tabs)/_layout.js：专注Tab页面展示，无需添加重定向

import { Tabs } from 'expo-router';

export default function TabsLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: '首页' }} />
      <Tabs.Screen name="profile" options={{ title: '我的' }} />
    </Tabs>
  );
}

核心逻辑总结：通过重置导航栈而非普通跳转，彻底移除登录页的栈记录，同时在全局层级做状态监听与路由控制，就能解决返回按钮回到登录页的问题。

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