En este caso, cuando el usuario inicie sesión, será redirigido a la página de mensajes. Quiero que el componente de encabezado se represente después de esto, pero no sucede. Si se muestra el encabezado, el enlace cambiará, pero si no se muestra, el enlace permanecerá sin cambios hasta que se actualice la página... ¿qué puedo hacer?
iniciar sesión.js:
const login = async (e) => { e.preventDefault(); const result = await ( await fetch("/portfolio/login", { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data), }) ).json(); if (result.accessToken) { navigate("/message"); //imported from @reach/router } else console.log(result.error); if (result.message) setRes(result.message); };encabezado.js:
const Header = () => { const [tokenObj, setToken] = useState(''); useEffect(() => { fetch('/portfolio/verify', {method : "GET"}) .then((res)=>{ if(res.ok) return res.json(res); }) .then((jsonRes)=> { if(jsonRes.token) setToken(jsonRes.token) }); }, [tokenObj]); let lastNavLink; let lastNavHref; if(tokenObj){ lastNavLink = 'Messages'; lastNavHref = '/message' } else { lastNavLink = 'Login'; lastNavHref = '/login'; } return <a href={lastNavHref}> {lastNavLink} </a> //dynamic link };Hay dos cosas que debe tener en cuenta antes de lanzarse a la solución:
localStorage para saber si el usuario ha iniciado sesión o no, independientemente de volver a cargar su página. Por lo tanto, al regresar, debe representar el enlace de forma condicional en función de la información de inicio de sesión (puede ser cualquier cosa, pero lo más probable es que sea información de usuario y/o token de acceso/autenticación) que guardará en el almacenamiento del navegador localmente después de iniciar sesión. Pero hay un problema, guardar y recuperar los datos de inicio de sesión de localStorage no sería suficiente porque necesitamos esos datos en forma de estado o accesorio, ya que solo entonces el componente reaccionará al cambio. Entonces, para contrarrestar eso, tendrá que sincronizar de alguna manera los datos en localStorage con state/prop.
Para lograr esto, se podría usar una combinación de redux , react-redux y redux-persist para contrarrestar este problema. Entonces, básicamente, funcionaría de la misma manera que funciona un flujo de redux normal, pero el cambio principal se realizará conservando su información de inicio de sesión a través redux-persist . Una vez que envuelva su reductor de inicio de sesión con redux-persist , persistirá/sincronizará automáticamente su reductor de inicio de sesión con localStorge . Puede encontrar muchos ejemplos para esto. Por lo tanto, enviaría su acción de inicio de sesión después de recibir la respuesta con datos relevantes como argumento (que se guardará en la tienda) y el resto será manejado por redux . Después de eso, solo tendría que obtener su estado de inicio de sesión de redux en su encabezado y, en función de eso, renderizar condicionalmente su enlace.
Esta es una solución posible, pero de todos modos te haces una idea de cómo funcionará. Podrías usar Context en lugar de Redux si quieres, pero de todos modos entiendes la idea.