React Native Expo中useContext条件渲染重定向不更新问题

你的问题出在Redirect的触发时机上：第一次渲染时，AuthContext的user还处于null的pending状态，这时候你直接返回了Redirect组件，Expo Router会立即触发导航，把当前的index.tsx组件卸载掉。等后续AuthContext成功加载用户信息时，这个组件已经不在DOM树里了，自然不会重新渲染，也就拿不到更新后的user值。

而去掉重定向或者用普通组件时，组件不会被卸载，所以能收到AuthContext的更新通知，重新渲染并输出正确的user值。

核心思路是先等待Auth状态加载完成，再执行重定向逻辑，避免在pending阶段就卸载组件。

修改后的代码示例 #

import React, { type ReactNode } from "react";
import { useAuthContext } from "@/contexts/AuthContext";
import { Redirect } from "expo-router";
import { Role } from "@/types/auth";
import { ActivityIndicator, View } from "react-native";

const Page = (): ReactNode => {
  const { status, user } = useAuthContext();
  console.log(status, user);

  // 等待Auth加载完成，显示加载状态
  if (status === "pending") {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  // 加载完成后，根据user角色重定向
  if (user?.role.id === Role.Business) {
    return <Redirect href="/(business)" />;
  }

  // 未登录或者普通用户，跳转到用户页面
  return <Redirect href="/(user)" />;
};

export default Page;

关键说明 #

• 先判断status，在pending状态时不要触发重定向，而是显示加载UI，保持组件挂载状态。
• 只有当Auth状态变为success（或你定义的完成状态）时，再根据user的角色执行重定向，这时候组件已经能拿到最新的user值了。
• 确保你的AuthContext里正确维护了status状态（比如pending、success、error），这样才能准确判断加载是否完成。

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