NextJS App Router 在 react-hook-form 中重定向

问：

我正在尝试做与这个问题类似的事情。我有一个登录页面，表单会检查提交的电子邮件是否有帐户;如果没有，我希望它重定向到注册页面：

const onSubmit = async (data) => {
  const { email } = data;

  const res = await checkUser(email)
  .then(async (isUser) => {
    if (isUser) {
      // do proper authentication
    } else {
      redirect('/register'); 
    }
  })
}

对前一个问题的唯一赞成答案是，“据我所知，该方法只能在服务器上使用”，然后继续建议使用 .现在，我可以这样做，但这是一个基于 NextJS 13 App-Router 的应用程序，与该答案中建议的相反，文档说，“可用于服务器组件、客户端组件、路由处理程序和服务器操作。所以，我觉得我应该使用 .redirectuseRouterredirectredirect

不幸的是，它是在它被调用的时候。现在，这种行为也被记录下来，并且是它应该做的。但是，它并没有真正重定向，而是陷入了我的障碍。throwcatch

可以在 CodeSandbox 中找到该问题的工作（即不工作）示例。

虽然比 CodeSandbox 的问题演示更冗长，但我的实际代码看起来像这样，评论中提到了三种不同的尝试（a、b 和 c）：

const onSubmit = async (data, toast) => {

  const { email } = data;

  const res = await checkUser(email)
  .then(async (isUser) => {
    if (isUser) {
      const cb = await signIn('email', {
        email: email,
        callbackUrl: '/profile'
      });

      return cb;
    } else {
      redirect('/register'); // option a & b passes through to catch block below
      // throw new Error('NFU'); // option (c)
    }
  })
  .then((callback) => {
    if (callback?.error) {
      throw new Error(callback.error);
    } else if (callback?.ok) {
      toast.create({
        title: 'Congratulations!',
        description: `You're signed in!`,
        status: 'success',
        duration: 5000
      });

      // return true; // part of c, below
    }
  })
  .catch(((error) => {
    // option b, re-throw if we got a 404 from the checkUser call; 
    // unhandled runtime error
    if(isRedirectError(error)) throw error;
    // 
    // if ('NFU' === error.message) return false; // part of (c), below
    toast.create({
      title: 'Error',
      description: error.message,
      status: 'error',
      duration: 5000
    });
  }))

  // if (!res) redirect('/register') // option c, unhandled runtime error
}

在选项 （a） 中，我只是调用 ，我以为它会起作用，但它却陷入了 .选项 （b） 来自 5 月份在 Vercel 的 GitHub 上关于在服务器操作中使用的讨论。那是在 App Router 离开实验状态之前，我正在做的不是服务器操作;尽管如此，我想我会试一试：简单地从内部重新处理错误，如果它是.但这会导致客户端上出现未处理的运行时错误，而不是重定向。redirectcatchredirectthrowcatchisRedirectError

最后（选项 c），我尝试从 promise 链中完全删除 ，设置为 either 或 ，如果为 false，则调用;但这也会导致未处理的运行时错误。redirectrestruefalseredirect

我该如何实现这项工作？

为了完整起见，可能值得注意的是，这个函数实际上是传递给 handleSubmit，因为表单是由 RHF 管理的。onSubmit

此外，该函数是在组件外部定义的，因为整个内容都包装在 FormProvider 上下文中，其中 和 按钮是共享代码的不同组件。onSubmitformsubmitonSubmit