Next.js非哈希路由报错求助：Cancel rendering route问题排查

可能的原因 #

• 路由跳转时机冲突：组件渲染过程中触发路由跳转（比如无依赖的useEffect），Safari与Chrome桌面端渲染队列逻辑不同，易触发渲染取消。
• 浏览器前进/后退缓存（BF Cache）影响：Safari和移动端Chrome对BF Cache处理更激进，页面从缓存恢复时，Next.js路由状态与浏览器状态不匹配，导致渲染中断。
• 异步操作未正确处理：getServerSideProps/getStaticProps中存在未捕获的异步错误，或客户端组件异步数据加载时触发路由跳转，引发渲染取消。
• 第三方库干扰：部分第三方UI库、埋点或权限校验工具在移动端修改路由行为，与Next.js路由逻辑冲突。

修复方案 #

1. 规范路由跳转时机 #

• 避免在组件初始化阶段（如无依赖的useEffect）直接触发路由跳转，仅在特定条件满足时执行跳转，且必须添加正确的依赖项：

  useEffect(() => {
    if (someCondition) {
      router.push('/target')
    }
  }, [someCondition, router])
  

• 表单提交或用户交互后的跳转，需确保操作完成后再执行，避免异步操作未结束就触发路由。

2. 适配BF Cache机制 #

• 在pages/_app.js或页面组件中监听pageshow事件，处理从BF Cache恢复的场景，必要时重置状态或强制刷新：

  useEffect(() => {
    const handlePageShow = (e) => {
      if (e.persisted) {
        // 根据业务需求选择重置状态或强制刷新
        window.location.reload()
      }
    }
    window.addEventListener('pageshow', handlePageShow)
    return () => window.removeEventListener('pageshow', handlePageShow)
  }, [])
  

3. 完善异步逻辑错误处理 #

• 在服务端数据获取函数中添加错误捕获，确保异常时返回重定向或错误页面：

  export async function getServerSideProps(context) {
    try {
      const data = await fetchData()
      return { props: { data } }
    } catch (error) {
      return {
        redirect: {
          destination: '/error',
          permanent: false,
        },
      }
    }
  }
  

• 客户端组件中，确保异步数据加载完成后再渲染依赖内容，避免因数据未就绪触发路由跳转：

  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('/api/data')
        const result = await res.json()
        setData(result)
      } catch (err) {
        console.error(err)
      } finally {
        setLoading(false)
      }
    }
    fetchData()
  }, [])
  
  if (loading) return <Loading />
  // 渲染业务内容
  

4. 排查第三方库冲突 #

• 暂时禁用第三方库，逐一排查是否存在路由行为干扰。
• 检查是否有库全局监听popstate事件，必要时调整库的配置或更换兼容Next.js的替代方案。

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