嵌套动态路由下Prop `href` 服务端客户端不匹配警告如何解决？

问题原因 #

这是SSR/SSG类框架（最常见于Next.js）的水合属性不匹配问题：服务端渲染时动态路由参数还未完成替换，返回了带占位符的原始路由模板；客户端渲染时参数已经注入完成，生成了实际的路由路径，两端href属性值不一致触发了警告。

解决方案 #

• 如果你用的是Next.js Pages Router的Link组件，用路由对象传参代替手动字符串拼接，配合as属性声明实际访问路径：

// 错误写法
<Link href={`/books/category/${category}/filter/${filter}#`}>跳转</Link>

// 正确写法
<Link 
  href={{
    pathname: '/books/category/[category]/filter/[filter]',
    query: { 
      category: categoryValue,
      filter: filterValue 
    }
  }}
  as={`/books/category/${categoryValue}/filter/${filterValue}#`}
>
  跳转
</Link>

• 如果你用的是Next.js 13+ App Router，直接传拼接完成的完整路径即可，框架会自动处理参数匹配，不需要额外声明as属性：

<Link href={`/books/category/${categoryValue}/filter/${filterValue}#`}>跳转</Link>

• 确保动态参数在服务端渲染阶段就能正常获取，不要仅在客户端useEffect中才获取参数：
  Pages Router可以通过getServerSideProps提前拿到路由参数传入组件，App Router可以直接读取页面组件自带的params参数，保证服务端和客户端生成的href完全一致。
• 若路径末尾的#无实际锚点作用，可以直接删除，避免额外的拼接误差。

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