Next.js带查询参数重定向异常：跳转后页面空白

核心问题定位 #

重定向后页面空白，但直接访问无参数的目标页正常，说明目标页面（register/login）在处理URL查询参数时存在错误，导致组件渲染失败。

排查与修复步骤 #

1. 检查目标页面的查询参数处理逻辑 #

以register.tsx为例，重点排查以下点：

• 是否正确通过useRouter或getServerSideProps获取查询参数：

  // 客户端组件用useRouter
  import { useRouter } from 'next/router';
  const router = useRouter();
  const { alertMessage, alertType } = router.query;
  // 注意：router.query在页面加载完成前可能为undefined，需做可选链或默认值处理
  

  或服务端处理：

  export const getServerSideProps: GetServerSideProps = async (context) => {
    const { alertMessage, alertType } = context.query;
    // 需确保参数存在时再处理，避免读取undefined属性报错
    return { props: { alertMessage: alertMessage || '', alertType: alertType || 'error' } };
  };
  

• 是否存在未捕获的错误：比如直接使用alertMessage.length但参数为空，导致TypeError，进而使组件崩溃。
• 是否有依赖参数的渲染逻辑：比如根据alertType渲染组件时，未处理未知的type值，导致渲染失败。

2. 修正重定向的永久/临时设置 #

当前代码中permanent: true会发送301永久重定向，浏览器会缓存该重定向规则，可能导致后续测试异常。验证跳转属于临时业务逻辑，应改为：

return {
  redirect: {
    destination,
    permanent: false, // 改为302临时重定向
  },
};

3. 检查URL拼接的正确性 #

确认REGISTER/LOGIN常量的格式：如果常量是不带末尾斜杠的路径（如'/register'），当前拼接逻辑没问题；如果常量带了查询参数，会导致参数重复，需确保拼接前目标路径干净。

4. 调试目标页面的错误 #

在浏览器开发者工具的控制台查看是否有报错信息，这是定位空白页面最直接的方式——组件崩溃通常会在控制台输出错误栈，根据错误信息修复对应的逻辑。

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