React Native登录成功后无法跳转首页，提示嵌套导航错误

问题原因 #

1. 你的路由结构通过isLoggedIn条件在同一个Stack Navigator中切换屏幕组，未登录状态下的栈里只有BoardScreen和Login，没有Home屏幕，登录后调用navigation.navigate("Home")找不到对应路由。
2. Home对应的组件是BottomNavigator（嵌套导航器），直接跳转到嵌套导航器的屏幕名称会触发该错误。

解决方案 #

方案一：重构导航结构（推荐）

将未登录页面和已登录页面拆分为独立子栈，根栈根据登录状态切换显示，既能避免路由找不到的问题，还能防止已登录用户回退到登录页。

修改后的App.js代码：

import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Stack = createStackNavigator();
const AuthStack = createStackNavigator();
const MainStack = createStackNavigator();

// 未登录路由栈
function AuthNavigator() {
  return (
    <AuthStack.Navigator screenOptions={{ headerShown: false }}>
      <AuthStack.Screen name="BoardScreen" component={OnBoardScreen} />
      <AuthStack.Screen name="Login" component={Login} />
    </AuthStack.Navigator>
  );
}

// 已登录主路由栈
function MainNavigator() {
  return (
    <MainStack.Navigator screenOptions={{ headerShown: false }}>
      <MainStack.Screen name="Home" component={BottomNavigator} />
      <MainStack.Screen name="DetailsScreen" component={DetailsScreen} />
    </MainStack.Navigator>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <StatusBar backgroundColor={COLORS.white} barStyle="dark-content" />
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          {isLoggedIn ? (
            <Stack.Screen name="Main" component={MainNavigator} />
          ) : (
            <Stack.Screen name="Auth" component={AuthNavigator} />
          )}
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

登录组件中，使用导航重置操作切换到主栈，同时清除之前的登录页路由：

import { CommonActions } from '@react-navigation/native';

const handleLogin = async () => {
  // 执行登录逻辑，比如请求接口验证账号密码
  const loginSuccess = await yourLoginApi();
  
  if (loginSuccess) {
    // 重置导航栈到主应用
    navigation.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [{ name: 'Main' }],
      })
    );
  }
};

方案二：更新登录状态自动切换路由

如果不想重构导航结构，只需在登录成功后更新isLoggedIn的状态（比如Redux或Context中的状态），App组件会因状态变化重新渲染，导航栈会自动切换到已登录的屏幕组，无需手动调用navigate。

登录组件代码示例：

const handleLogin = async () => {
  // 执行登录请求
  const result = await loginApi(yourCredentials);
  
  if (result.success) {
    // 更新登录状态（比如通过Redux dispatch）
    dispatch(setLoggedIn(true));
  }
};

补充说明 #

原代码中，未登录状态下的栈没有Home屏幕，直接navigate("Home")必然失败。另外，即使栈中有Home屏幕，因为它对应嵌套导航器，若要跳转到嵌套导航器内的具体标签页，需要用navigation.navigate("Home", { screen: "你的标签页名称" })，但解决路由不存在的问题是前提。

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