Cuando navego de /pageA a /pageB , estoy pasando un accesorio a través del enlace de Gatsby para mostrar la información de la interfaz de usuario en la página B que necesito de la página A.
Si el usuario sigue el flujo correctamente, la aplicación funciona como se esperaba. El problema ocurre cuando el usuario salta manualmente a /pageB desde una página diferente (es decir, cambiando la URL de /home a /pageB )
La biblioteca de navegación que estoy usando es gatsby-plugin-transition-link y estoy pasando los accesorios siguiendo la documentación así
<Link to={'/pageB'} state={{ fromPageA: true }} >Mi idea inicial era que si el accesorio devolvía un valor nulo, luego navegaba de regreso a la página anterior porque entonces sabíamos que no provenía de la página correcta.
useEffect(() => { console.log(location.state.fromPageA); if (location.state.fromPageA === null) { navigate('/pageA') } }, []); El problema es que ni siquiera puedo verificar eso porque si lo console.log Lo registro y es nulo, inmediatamente falla mi aplicación con el error.
No se pueden leer las propiedades de null (leyendo 'fromPageA')
Creo que lo que está rompiendo su código actual es la validación de console.log , no la declaración if . Esto debería funcionar:
useEffect(() => { if (location?.state?.fromPageA === null) { navigate('/pageA') } }, []);Si no está utilizando el encadenamiento opcional, puede hacer lo siguiente:
useEffect(() => { if (location){ if(location.state){ if(!location.state.fromPageA){ navigate('/pageA') } } } }, []); Suponiendo que está desestructurando la location como props en el constructor del componente. De lo contrario, use props.location .