Next.js部分页面点击浏览器后退按钮时router无响应问题求助

排查思路 #

• 先排查路径拼写一致性：你提供的目录结构里写的是pages/arworks/（少了字母t），但实际访问路径是/artworks，确认是否是拼写笔误，如果真实存在路径拼写和目录结构不匹配的情况，Next.js的客户端路由匹配会出现异常，服务端渲染走文件系统能命中但客户端路由映射出错，就会出现a标签跳转正常、NextLink跳转异常的情况。
• 测试NextLink简化写法：你当前用的是href加as的旧写法，新版本Next.js支持直接将动态路径写在href属性里，改为以下写法测试：

  <NextLink href={`/artworks/${product.slug}`}>
    <a>...</a>
  </NextLink>
  

  不需要加passHref和单独的as参数，排除参数匹配异常的问题。
• 检查是否开启了浅路由配置：排查是否全局给NextLink设置了shallow={true}，或者在跳转逻辑里有浅路由配置，浅路由模式下URL变化不会触发页面组件的重渲染，也不会触发路由生命周期事件。
• 对比出问题页面和正常events页面的差异：
  • 检查两类页面的数据获取方式（getStaticProps/getServerSideProps/getInitialProps）是否不同
  • 检查出问题的列表页（artworks/galleries/artists）是否被React.memo包裹，且依赖项未包含router.pathname/router.asPath，导致路由变化时组件没有触发更新
  • 检查是否在_app.tsx或全局布局中对这几类路径做了特殊的缓存/keep-alive处理
• 测试禁用预加载：给出问题的NextLink添加prefetch={false}属性，排除预加载阶段路由匹配缓存异常的问题。
• 验证Next.js版本兼容性：排查是否使用了存在已知NextLink路由bug的版本，可升级到对应大版本的最新稳定版测试。
• 排查全局路由拦截逻辑：检查是否在_app.tsx或者自定义路由中间件里对artworks等路径的路由跳转做了拦截，阻止了路由事件的触发。

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