React Native Expo路由问题：登录成功无法跳转至首页

1. 确保登录后authorized状态正确更新 #

登录成功后必须同步更新控制路由显示的authorized状态（比如用useState或状态管理工具），否则路由不会重新渲染，无法切换到授权后的页面集合。

示例代码（基于useState）：

// 根组件内定义状态
const [authorized, setAuthorized] = useState(false);

// 登录成功后的处理逻辑
const handleLoginSuccess = async (token) => {
  // 持久化存储用户凭证（比如用AsyncStorage）
  await AsyncStorage.setItem('userToken', token);
  // 更新授权状态，触发路由重新渲染
  setAuthorized(true);
};

2. 登录后主动触发页面跳转 #

即使状态更新，当前页面仍停留在Login页，需要调用导航器的跳转方法切换到Home。

方式一：通过组件props获取导航对象 #

如果Login是由DrawerNavigator渲染的，可直接从props拿到导航：

// Login组件内部
const Login = ({ navigation }) => {
  const handleLogin = async () => {
    // 执行登录接口请求
    const token = await loginRequest();
    // 更新授权状态
    await handleLoginSuccess(token);
    // 跳转到Home页面
    navigation.navigate('Home');
  };

  return <Button onPress={handleLogin} title="登录" />;
};

方式二：使用useNavigation钩子（React Navigation 6+） #

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

const Login = () => {
  const navigation = useNavigation();

  const handleLogin = async () => {
    const token = await loginRequest();
    await handleLoginSuccess(token);
    navigation.navigate('Home');
  };

  return <Button onPress={handleLogin} title="登录" />;
};

3. 优化路由结构（推荐） #

当前路由写法会在状态变化时频繁销毁重建Drawer的Screen，容易导致导航状态丢失。更合理的做法是拆分登录路由和授权后路由为独立导航容器：

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

// 未授权时的路由栈
const AuthStack = () => (
  <Drawer.Navigator>
    <Drawer.Screen name="Login" component={Login} />
  </Drawer.Navigator>
);

// 授权后的路由栈
const AppStack = () => (
  <Drawer.Navigator initialRouteName="Home">
    <Drawer.Screen name="Home" component={Home} />
    <Drawer.Screen name="Reddit" component={Reddit} />
    <Drawer.Screen name="Search" component={Search} />
    <Drawer.Screen name="Messages" component={Messages} />
    <Drawer.Screen name="Video" component={VideoPage} />
  </Drawer.Navigator>
);

export default function App() {
  const [authorized, setAuthorized] = useState(false);

  // 初始化时检查本地存储的凭证
  useEffect(() => {
    const checkAuth = async () => {
      const token = await AsyncStorage.getItem('userToken');
      setAuthorized(!!token);
    };
    checkAuth();
  }, []);

  return (
    <NavigationContainer>
      {authorized ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  );
}

这种结构下，授权状态更新时会直接切换整个导航容器，配合登录后的跳转，体验更稳定。

内容的提问来源于stack exchange，提问作者Skyler.Ab