Next.js出现Prop `href`不匹配警告 服务端为/客户端为/#page3如何解决

问题根因 #

URL的hash片段不会发送到服务端，Next.js服务端渲染阶段只能拿到路径/，客户端hydration时拿到的是带hash的完整路径/#page3，两边渲染的href属性不一致触发React的hydration不匹配警告。

解决方案 #

• 方案1：给出问题的组件添加suppressHydrationWarning属性
  如果你只是单组件小范围出现这个警告，可以直接在抛出警告的元素上添加该属性，React会跳过这个元素的hydration属性校验，改造成本最低：

  <Link href={router.asPath} suppressHydrationWarning>
    <a>菜单链接</a>
  </Link>
  

• 方案2：客户端挂载后再补全hash路径
  服务端渲染阶段仅渲染不带hash的路径，等到组件在客户端挂载完成后再拼接hash部分，从根源保证服务端和客户端渲染结果一致：

  import { useEffect, useState } from 'react'
  import { useRouter } from 'next/router'
  import Link from 'next/link'
  
  export default function NavLink() {
    const router = useRouter()
    const [fullHref, setFullHref] = useState(router.pathname)
  
    useEffect(() => {
      setFullHref(router.asPath)
    }, [router.asPath])
  
    return <Link href={fullHref}><a>导航链接</a></Link>
  }
  

• 方案3：禁用涉hash逻辑组件的服务端渲染
  所有和全屏滚动、hash路由相关的逻辑本身仅在客户端运行，直接用Next.js的dynamic导入关闭该组件的SSR即可：

  import dynamic from 'next/dynamic'
  
  // 引入你的全屏滚动组件时关闭SSR
  const FullpageScroll = dynamic(() => import('../components/FullpageScroll'), {
    ssr: false
  })
  

• 方案4：优化多语言切换逻辑，移除多余的reload调用
  原代码中router.reload属于不必要的操作，router.push传入locale参数后会自动处理路由更新和语言切换，去掉reload即可避免主动刷新触发的不匹配问题：

  // 删除router.reload调用即可
  router.push(router.asPath, router.asPath, { locale: 'en' });
  

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