Expo文件路由中未登录时条件渲染注册页的问题排查

核心问题诊断 #

1. Hook使用违规：在AunthenticatedDrawer的updateHeaderTitle函数中，嵌套调用useFocusEffect违反了React Hook的调用规则（Hook必须在组件顶层执行），这会导致组件渲染逻辑混乱，引发初始路由渲染异常。
2. 路由容器未强制重渲染：当user状态变化时，React可能复用旧的路由容器组件（Drawer/Stack），导致未正确切换到注册页面。
3. 初始状态传递异常：若DataContext的状态管理逻辑存在疏漏，可能导致组件初始渲染时未正确获取到user=false的状态。

分步修复方案 #

1. 修复Hook调用违规问题 #

将useFocusEffect移到组件顶层，重构标题更新逻辑：

function AunthenticatedDrawer() {
  const colorScheme = useColorScheme();
  const router = useRouter();

  // 将useFocusEffect移至组件顶层，符合Hook调用规则
  useFocusEffect(
    useCallback(({ navigation, route }) => {
      const routeName = getFocusedRouteNameFromRoute(route) ?? "Home";
      let title = "";
      switch (routeName) {
        case "index":
          title = "Questions";
          break;
        case "myCourses":
          title = "My Courses";
          break;
        case "inbox":
          title = "Messages";
          break;
        case "creator":
          title = "Create";
          break;
        case "profile":
          title = "Profile";
          break;
        default:
          break;
      }
      navigation.setOptions({ title: title });
    }, [])
  );

  return (
    <Drawer
      screenOptions={{
        headerTintColor: colorScheme === "dark" ? "white" : "black",
        headerRight: () => (
          <MaterialIcons
            name="notifications"
            color={colorScheme === "dark" ? "white" : "black"}
            size={23}
            onPress={() => router.push("/notifications")}
          />
        ),
      }}
    >
      <Drawer.Screen
        name="authenticated/(tabs)"
        options={{ drawerLabel: "Home", title: "" }}
      />
      <Drawer.Screen
        name="authenticated/question/[id]"
        options={{
          drawerLabel: "Question",
          drawerItemStyle: { display: "none" },
          title: "",
        }}
      />
      <Drawer.Screen
        name="authenticated/notifications"
        options={{ drawerLabel: "Notifications" }}
      />
      <Drawer.Screen
        name="+not-found"
        options={{ drawerItemStyle: { display: "none" } }}
      />
      <Drawer.Screen
        name="authenticated/report/[id]"
        options={{
          title: "Report",
          drawerItemStyle: { display: "none" },
        }}
      />
    </Drawer>
  );
}

2. 强制路由容器重渲染 #

给Drawer和Stack组件添加唯一key，确保user状态变化时，React卸载旧组件并重新渲染新容器：

function RootLayout() {
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });
  const { user } = useContext(DataContext);
  
  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        {/* 添加key属性，强制组件重新渲染 */}
        {user ? (
          <AunthenticatedDrawer key="authenticated-container" />
        ) : (
          <UnAuthenticatedStack key="unauthenticated-container" />
        )}
      </GestureHandlerRootView>
    </ThemeProvider>
  );
}

3. 验证DataContext的初始状态 #

确保DataProvider中user的初始状态正确设置为false，且状态更新是响应式的：

// DataContext参考实现
import { createContext, useState } from "react";

export const DataContext = createContext();

export default function DataProvider({ children }) {
  // 明确设置初始user状态为false
  const [user, setUser] = useState(false);
  return (
    <DataContext.Provider value={{ user, setUser }}>
      {children}
    </DataContext.Provider>
  );
}

4. 确认路由文件结构合规 #

确保注册页面的文件路径符合Expo Router规则：

• 注册页文件需放在app/unauthenticated/signup.tsx（或.jsx）位置
• 确保unauthenticated目录存在，且signup文件是有效的React组件

额外注意事项 #

• 所有Hook必须在组件顶层调用，禁止在路由options回调、嵌套函数中使用Hook
• 若user状态从异步存储加载，需在DataProvider中添加加载状态，避免初始渲染时状态不确定

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