Next.js中出现‘Error: Abort fetching component for route: "/settings"’错误如何修复

问题原因 #

控制台出现的Error: Abort fetching component for route: "/settings"错误，是因为你在Home组件的渲染阶段直接调用router.push触发路由跳转。Next.js在组件渲染过程中如果发生路由变更，会中止当前组件的渲染流程，从而抛出这个错误。

修复步骤 #

修改Home组件代码，将路由跳转逻辑放到useEffect中执行（useEffect会在组件渲染完成后触发，不会打断渲染流程）：

import React, { useEffect } from 'react'
import { useRouter } from 'next/router'
import { useSession } from 'next-auth/react'
import { Login } from '@/components/Login/Login'

export default function Home() {
  const router = useRouter()
  const callbackUrl = (router.query?.callbackUrl as string) ?? '/dashboard'
  const { data: session, status } = useSession()

  const loading = status === 'loading'

  // 用useEffect处理登录后的路由跳转
  useEffect(() => {
    if (session) {
      router.push(callbackUrl)
    }
  }, [session, callbackUrl, router])

  if (loading) {
    // 可替换为自定义加载组件，比如Spinner
    return <div>加载中...</div>
  }

  if (!session) {
    return <Login />
  }

  // 跳转前返回空或加载组件，避免页面空白
  return null
}

额外说明 #

• 登录按钮的signIn('cognito', { redirect: false })逻辑无需修改，保持手动控制跳转时机的逻辑即可。
• 补充loading状态的渲染内容，避免用户在session校验过程中看到空白页面。

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