[英]Nextjs UseEffect is not rendering on route change
我在每个组件中的组件内部都遇到了 useEffect 问题。 我在该组件中进行了一些身份验证和重定向,但我认为当我使用 Nextjs 链接或浏览器中的 go 后退按钮时,布局 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>
)
}
我希望你能帮助我,提前谢谢!
如果您希望 useEffect 触发路由器更改,则必须将其添加为 useEffect 挂钩的依赖项:
useEffect(() => {
...
}, [isVender, router.pathname])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.