Tengo un HOC que redirige al usuario para que inicie sesión si no hay un token. Y lo que quiero lograr es almacenar la URL que el usuario pretendía visitar antes de redirigir y empujarlo de regreso a esa página. Pero el problema está en HOC. Obtengo solo /product/[id] pero no /product/1 .
conAuth.ts:
import { TokenService } from '@/api/tokenService'; import { useRouter } from 'next/router'; import React from 'react'; type TWithAuth = { WrappedComponent: JSX.Element; }; export function withAuth<T extends TWithAuth = TWithAuth>( WrappedComponent: React.ComponentType<T>, ): React.ComponentType<T> { const InnerComponent = (props: T) => { if (typeof window !== 'undefined') { const Router = useRouter(); console.log(Router); const accessToken = TokenService.getAccessToken(); if (!accessToken) { Router.replace('/auth/login'); return null; } return <WrappedComponent {...props} />; } return null; }; InnerComponent.displayName = `withAuth(${WrappedComponent.displayName || WrappedComponent.name}`; return InnerComponent; }Supongo que no está utilizando la representación del lado del servidor (getServerSideProps). Luego, debe conservar el estado entre las solicitudes en el lado del cliente (navegador)
Estos son los pasos:
Está llamando al gancho useRouter dentro de una declaración if, lo que rompe la primera regla de los ganchos.
También,
Probar:
export function withAuth<T extends TWithAuth = TWithAuth>( WrappedComponent: React.ComponentType<T>, ): React.ComponentType<T> { const InnerComponent = (props: T) => { const Router = useRouter(); useEffect(()=> console.log(Router), []); const accessToken = TokenService.getAccessToken(); // is it async? If so, maybe it should be wrapped inside useEffect if (!accessToken) { Router.replace('/auth/login'); // no need to return null, you are already redirecting } return <WrappedComponent {...props} />; } return null; };