使用 NextJS 路由器时的 useEffect 依赖项

Question

我有一个 NextJS 项目，使用 NextJS 路由器将用户路由到基于特定状态变量的页面。

我查找了如何使用 NextJS路由器文档执行我想要的操作，其中包含以下示例：

const useUser = () => ({ user: null, loading: false })

export default function Page() {
  const { user, loading } = useUser()
  const router = useRouter()

  useEffect(() => {
    if (!(user || loading)) {
      router.push('/login')
    }
  }, [user, loading])

  return <p>Redirecting...</p>
}

当我将该示例粘贴到我的代码中时，ESLint 对我不将路由器作为依赖项包括在内感到不满意 - 显示以下消息：

React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps

该消息是有道理的 - 我们在效果中使用 useRouter 挂钩，但没有将其添加到效果的依赖项数组中。

但是，将其添加到依赖项数组自然会导致无限的重新渲染循环（因为我使用动态路由，因此由于路由器正在更改，因此会一遍又一遍地调用相同的效果）。

我应该忽略 ESLint 的警告，还是应该一起做一些不同的事情？

编辑：值得注意的是我正在使用NextJS ESlint 配置

Answer 1

与其使用useRouter，不如使用Router。

import Router from "next/router";

export default function Page() {
  const { user, loading } = useUser()

  useEffect(() => {
    if (!(user || loading)) {
      Router.push("/login");      
    }
  }, [user, loading])

  return <p>Redirecting...</p>
}

这就是我在代码中解决这个问题的方法。

Answer 2

目前，这是一个错误。

看来useRouter方法本身就改变了useRouter。因此，每次调用这些方法之一时，useRouter都会发生变化，从而导致此循环。

另一个问题是 Next.js 不记忆useRouter，所以即使值相同它也会改变。

目前，我找到的最接近的解决方法来自对此开放问题的评论https://github.com/vercel/next.js/issues/18127#issuecomment-950907739。

它所做的就是“转换”useRouter为 auseRef并导出该push方法。所以每次使用这个方法时，如果值没有改变，这个引用也不会改变。

解决方法：

我很快就想出了这个，这似乎有效：

import { useRouter } from 'next/router'
import type { NextRouter } from 'next/router'
import { useRef, useState } from 'react'

export default function usePush(): NextRouter['push'] {
    const router = useRouter()
    const routerRef = useRef(router)

    routerRef.current = router

    const [{ push }] = useState<Pick<NextRouter, 'push'>>({
        push: path => routerRef.current.push(path),
    })
    return push
}

它返回一个在语义上记忆的推送函数，因此可以安全地与 useEffect 一起使用，例如

const push = usePush()

useEffect(() => {
    checkLoggedIn().then(loggedIn => {
        if (!loggedIn) {
            push('/login')
        }
    })
}, [push])