Next.js页面刷新时Query参数丢失问题解决方案

你当前的写法通过as属性将路由实际展示路径重写为/alyDeal/${jobId}，其余query参数没有被拼接在公开URL上。客户端单页跳转时Next.js会在内存中临时持有这些参数，但页面刷新时是直接向服务端发起全新请求，服务端只能解析到URL路径中自带的jobId，自然无法获取其余未暴露在URL中的参数，这是Next.js Pages Router的正常逻辑，不是代码异常。

• 全局状态+接口兜底（生产环境首选）
  这是最稳妥的实现方式，完全不需要在URL上拼接多余参数，也不会出现刷新丢数据的问题：
  1. 客户端跳转前，先把完整的岗位数据存在全局状态（Zustand、Redux、React Context均可），用jobId作为存储键名
  2. 跳转后页面优先从全局状态读取对应jobId的全量数据渲染
  3. 页面刷新、或者用户直接输入URL进入详情页时，在getServerSideProps中拿到路径中的jobId，直接查询数据库/调用后端接口获取对应岗位的全量数据，返回给页面作为兜底渲染数据
• 路由状态传参+持久化兜底
  使用Next.js路由自带的state能力传参，不需要把参数暴露在URL中：
  跳转逻辑替换为：

  import { useRouter } from 'next/router'
  const router = useRouter()
  
  const handleJump = () => {
    router.push(
      {
        pathname: `/alyDeal/${jobId}`
      },
      `/alyDeal/${jobId}`,
      {
        state: {
          jobName,
          desc,
          subcat,
          city,
          // 其余所有需要传递的参数
        }
      }
    )
  }
  

  目标页面在客户端从router.state中读取参数即可。注意纯路由state刷新会丢失，需要配合sessionStorage存一份同key数据做刷新兜底，或者和上面方案一样加jobId查接口的逻辑。
• URL加密参数传参
  如果不想让参数明文展示在URL上，可以把所有非id参数做一次对称加密，生成一个短密文作为单独的query参数拼接在URL末尾，getServerSideProps中拿到密文后解密即可拿到全量参数，刷新不会丢失。注意控制加密后内容长度，不要超过URL的长度限制，适合传递体量较小的数据。
• sessionStorage中转
  跳转前将所有待传参数存在sessionStorage中，key取对应jobId，目标页面加载时在客户端useEffect中读取对应key的数据渲染。这种方式getServerSideProps无法直接读取存储内容，需要搭配客户端水合逻辑，同时也要加jobId查接口的兜底，避免用户清缓存后数据为空。

注意：不要试图把大量敏感参数直接拼在明面上的query里，哪怕做了伪装，用户打开控制台还是能看到，涉及详情数据的场景优先用ID查接口的方案，安全性和稳定性都最高。

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