Next.js中useEffect缺失依赖'route'：为何yarn build报错dev不报错？

报错本质 #

你的代码违反了React Hooks的exhaustive-deps规则：useEffect回调里用到了route变量，但没把它加入依赖数组，ESLint会检测到这个问题并抛出错误。

为什么开发模式不报错，构建时才触发？ #

Next.js的默认配置里，开发环境（yarn dev）下ESLint把这类依赖问题设为警告，只会在控制台提示，不会阻断开发流程；而生产构建（yarn build）时，ESLint会将其升级为错误，直接中断构建，强制你修复，避免生产环境出现潜在的不一致渲染问题。

可行的解决方法 #

方法1：将route加入依赖数组 #

useRouter()返回的路由实例是稳定的（组件每次渲染都返回同一个引用），加入依赖不会导致不必要的重渲染，这是最合规的做法：

import { useRouter } from "next/router"

const route = useRouter();

useEffect(() => {
  if (user) {
    route.push("/")
  } else {
    console.log("login")
  }
}, [user, route]);

方法2：解构出所需的路由方法 #

如果你不想依赖整个route对象，可以解构出用到的push方法，依赖更精准：

import { useRouter } from "next/router"

const { push } = useRouter();

useEffect(() => {
  if (user) {
    push("/")
  } else {
    console.log("login")
  }
}, [user, push]);

方法3：临时忽略ESLint警告（不推荐） #

如果确定route不会变化，也可以用注释跳过检测，但这会绕过Hooks的安全检查，可能隐藏后续的依赖问题：

import { useRouter } from "next/router"

const route = useRouter();

useEffect(() => {
  if (user) {
    route.push("/")
  } else {
    console.log("login")
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [user]);

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