Nextjs UseEffect 未在路线更改时呈现答案

【问题标题】：Nextjs UseEffect is not rendering on route changeNextjs UseEffect 未在路线更改时呈现
【发布时间】：2022-01-13 17:07:34
【问题描述】：

我在每个组件中都有一个组件内部的 useEffect 问题。我已经在该组件中进行了一些身份验证和重定向，但我认为当我使用 Nextjs 链接或浏览器中的返回按钮时，布局 useEffect 不会重新呈现，这意味着它不会检查用户是否已登录。

这是我的布局组件

const Layout = ({ children }) => {

  const router = useRouter()
  const { setAuthenticated, userFromDB, setUserFromDB, setIsVender, isVender } = useContext(AuthContext)

  //cuando hacemos un login el token se guarda en el local storage asi que comprobamos que exista
  useEffect(() => {
    const checkToken = async () => {
      const token = localStorage.getItem('FBIdToken')
      if (token) {
        const decodedToken = jwtDecode(token);
        //si la fecha de expiracion del token supero a la actual, redirect al login
        if (decodedToken.exp * 1000 < Date.now()) {
          setAuthenticated(false)
          router.replace('/login');
        } else {
          if(!userFromDB){
            const user = await getUser(decodedToken.user_id);
            //si encontro un usuario, lo asignamos al context api
            if(user){
              console.log(user)
              //  obtenemos el objecto con los datos del usuario y seteamos en el context si es vendedor o no
              if(typeof user.isVender !== undefined){
                user.isVender ? setIsVender(true) : setIsVender(false);
              }
              setUserFromDB(user);
            }
            setAuthenticated(true)
          }
        }
        console.log('ejecutando');
      } else {
        if(router.pathname !== "/" && 
            router.pathname !== "/download-app" && 
            router.pathname !== "/register" && 
            router.pathname !== "/login"
          ) {
          console.log(router.pathname, 'redirigiendo')
          router.replace('/login')
        }
        
      }
    }
    //comprobamos que haya un token y redirigimos al usuario en base a el
    checkToken();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isVender])


  return (
    <div>
      {children}
    </div>
  )
}

这就是我在 _app.js 组件中导入它的方式

  return (
    <AuthProvider>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </AuthProvider>
  )
}

希望你能帮助我，在此先感谢！

【问题讨论】：

这个：// eslint-disable-next-line react-hooks/exhaustive-deps 几乎总是表明代码中存在错误。它可能掩盖了你的代码中的错误。除非您确定您是对的并且 lint 规则是错误的，否则不要这样做。只有在isVender（无论是什么）发生变化时，该效果才会重新运行。
我删除它并没有发生任何事情，我认为这是因为警告但现在消失了

标签： javascript reactjs next.js

【解决方案1】：

如果您希望 useEffect 在路由器更改时触发，您必须将其添加为您的 useEffect 挂钩的依赖项：

useEffect(() => {
   ...
}, [isVender, router.pathname])

【讨论】：

谢谢！我不知道我可以用路由器做到这一点。你救了我！