React Native执行NAVIGATE跳转Choose页面未被导航器处理报错排查

报错原因 #

你当前的路由是嵌套结构：

• 根导航栈StackRoutes注册了Choose页面，同时将Leave路由绑定到了AuthRoutes子导航栈
• Login页面属于AuthRoutes子导航栈，你在Login页面拿到的navigation对象是子导航栈的实例，仅能访问子导航栈内注册的路由，而Choose没有在子导航栈注册，所以跳转时找不到对应页面抛出错误。

解决方案 #

方案1：调用父级导航器完成跳转 #

直接修改登录成功后的跳转代码，从父级导航器（也就是注册了Choose的根导航栈）触发跳转即可：
把原来的跳转代码

navegation.dispatch(CommonActions.navigate('Choose'));

替换为：

// 获取父级导航器后跳转
navigation.getParent()?.navigate('Choose');

方案2：优化路由结构为条件渲染（更推荐） #

当前你把登录相关的路由嵌套在业务根栈里的设计不合理，更符合常规逻辑的写法是根据全局登录状态，直接条件渲染不同的导航栈，无需手动跳转，也不会出现嵌套路由跳转问题：

// 根路由入口示例
export function RootRoutes() {
  // 取全局登录状态，比如从Context、Redux、zustand等存储中获取
  const { isLogin } = useUserStore();
  const { Navigator, Screen } = createNativeStackNavigator();

  return (
    <Navigator screenOptions={{headerShown: false}}>
      {
        !isLogin ? (
          // 未登录时只渲染登录相关路由栈
          <Screen name="Auth" component={AuthRoutes} />
        ) : (
          // 登录后渲染业务路由栈
          <Screen name="Main" component={StackRoutes} />
        )
      }
    </Navigator>
  )
}

用这种结构的话，你登录成功更新全局登录状态后，路由会自动切换到业务栈，默认就会进入你设置的初始路由Choose，不需要手动写跳转逻辑。

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