React-Navigation嵌套导航：权限驱动栈组切换报错求助

需求是根据用户权限状态在两个栈组间导航：若用户已授权则跳转至包含HomeComponents、EditProfileView的栈组，否则停留在权限授权页面；未登录用户则停留在登录页面。

当前实现步骤：

1. 应用启动前检查权限：

const permissionListener = checkPermissions().then(value => {
  if (value) {
    setPermissionsAllowed(value);
  } else {
    console.log('Permissions not allowed ');
  }
});

2. 导航配置采用条件渲染栈组：

<NavigationContainer>
  <Stack.Navigator
    screenOptions={{
      headerShown: false,
      // contentStyle: {backgroundColor: ColorPaletteLight.accent100},
    }}>
    {loggedIn ? (
      <Stack.Group>
        {permissionsAllowed ? (
          <Stack.Group>
            <Stack.Screen
              name="HomeComponents"
              component={HomeComponents}
            />
            <Stack.Screen
              name="EditProfileView"
              component={EditProfileView}
            />
          </Stack.Group>
        ) : (
          <Stack.Group>
            <Stack.Screen name="Permissions" component={Permissions} />
          </Stack.Group>
        )}
      </Stack.Group>
    ) : (
      <Stack.Group>
        <Stack.Screen name="Login" component={LoginModify} />
      </Stack.Group>
    )}
  </Stack.Navigator>
</NavigationContainer>

遇到的问题：尝试跳转至不同Stack Group内的页面时出现导航错误（提示为「找不到名为XXX的路由」类的路由不存在错误）。

通过条件渲染Stack.Group的方式，会导致当permissionsAllowed或loggedIn状态变化时，原来的栈组会被完全卸载，对应的路由也会从导航树中移除。此时如果尝试导航到已被卸载的栈组内的页面，导航器就会找不到对应的路由，从而抛出错误。

方案1：统一管理路由+导航守卫 #

将所有屏幕注册到导航器中，通过初始路由和导航守卫控制页面访问权限，不再条件渲染栈组：

<NavigationContainer>
  <Stack.Navigator
    initialRouteName={loggedIn ? (permissionsAllowed ? "HomeComponents" : "Permissions") : "Login"}
    screenOptions={{ headerShown: false }}
  >
    <Stack.Screen name="Login" component={LoginModify} />
    <Stack.Screen name="Permissions" component={Permissions} />
    <Stack.Screen 
      name="HomeComponents" 
      component={HomeComponents}
      options={{
        // 拦截页面离开操作，限制未授权用户访问
        beforeRemove: ({ navigation }) => {
          if (!permissionsAllowed) {
            navigation.reset({ routes: [{ name: "Permissions" }] });
            return false;
          }
          return true;
        }
      }}
    />
    <Stack.Screen 
      name="EditProfileView" 
      component={EditProfileView}
      options={{
        beforeRemove: ({ navigation }) => {
          if (!permissionsAllowed) {
            navigation.reset({ routes: [{ name: "Permissions" }] });
            return false;
          }
          return true;
        }
      }}
    />
  </Stack.Navigator>
</NavigationContainer>

同时在权限检查完成后，通过navigation.reset更新路由：

checkPermissions().then(value => {
  setPermissionsAllowed(value);
  if (value && loggedIn) {
    navigation.reset({ routes: [{ name: "HomeComponents" }] });
  } else if (loggedIn) {
    navigation.reset({ routes: [{ name: "Permissions" }] });
  }
});

方案2：使用嵌套导航结构 #

将已登录后的权限流程作为独立的嵌套导航，避免条件渲染顶级栈组：

// 已登录状态下的导航器
const AuthenticatedNavigator = () => {
  const [permissionsAllowed, setPermissionsAllowed] = useState(false);

  useEffect(() => {
    checkPermissions().then(value => {
      setPermissionsAllowed(value);
    });
  }, []);

  return (
    <Stack.Navigator initialRouteName={permissionsAllowed ? "HomeComponents" : "Permissions"}>
      <Stack.Screen name="Permissions" component={Permissions} />
      <Stack.Group>
        <Stack.Screen name="HomeComponents" component={HomeComponents} />
        <Stack.Screen name="EditProfileView" component={EditProfileView} />
      </Stack.Group>
    </Stack.Navigator>
  );
};

// 根导航器
const RootNavigator = () => {
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <NavigationContainer>
      <Stack.Navigator headerShown={false}>
        {loggedIn ? (
          <Stack.Screen name="Authenticated" component={AuthenticatedNavigator} />
        ) : (
          <Stack.Screen name="Login" component={LoginModify} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

方案3：监听状态变化重置导航栈 #

保留原状态逻辑，通过useEffect监听状态变化，调用navigation.reset切换整个导航栈，不再条件渲染栈组：

const RootNavigator = () => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [permissionsAllowed, setPermissionsAllowed] = useState(false);
  const navigation = useNavigation();

  useEffect(() => {
    checkPermissions().then(value => {
      setPermissionsAllowed(value);
    });
  }, []);

  // 监听状态变化，重置导航栈
  useEffect(() => {
    let targetRoute;
    if (!loggedIn) {
      targetRoute = "Login";
    } else {
      targetRoute = permissionsAllowed ? "HomeComponents" : "Permissions";
    }
    navigation.reset({
      routes: [{ name: targetRoute }]
    });
  }, [loggedIn, permissionsAllowed, navigation]);

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Login" component={LoginModify} />
        <Stack.Screen name="Permissions" component={Permissions} />
        <Stack.Screen name="HomeComponents" component={HomeComponents} />
        <Stack.Screen name="EditProfileView" component={EditProfileView} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

方案1和方案3适合简单权限场景，方案2的嵌套导航结构更清晰，适合复杂权限分层场景。核心思路是避免动态卸载/挂载导航栈组，确保所有可能访问的路由始终存在于导航树中，通过导航守卫或栈重置控制页面访问。

内容的提问来源于stack exchange，提问作者Sri Sai Sharanya Sirigiri