Sé sobre el enlace de navegación, pero necesito controlar la ruta desde el objeto de la ventana, lo que significa que tiene que ser una función global. En vuejs, fue fácil como,
window.pushpath = function(path) { router.push("/"+path) }¿Cómo puedo lograr este tipo de comportamiento en reaccionar? No puedo usar ganchos de reacción en js ya que está prohibido usar ganchos de reacción sin usarlos dentro del componente.
Una solución trivial podría ser usar un gancho useEffect para configurar la función window.pushpath usando la función de navigate devuelta por el gancho useNavigate .
Ejemplo:
import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; ... const navigate = useNavigate(); useEffect(() => { window.pushpath = function(path, options) { navigate(path, options); } }, []); Esta lógica solo puede funcionar siempre que haya un componente de enrutador más alto en ReactTree que el componente que ejecuta este efecto, es decir, el Router debe estar en el componente principal o más arriba.
Cualquier linter también puede quejarse de una dependencia faltante en la función de navigate . Es, AFAIK, una referencia estable, pero debería estar bien para agregar.
useEffect(() => { window.pushpath = function(path, options) { navigate(path, options); } }, [navigate]); Ahora que window.pushpath está actualizado, se puede llamar y pasar los mismos argumentos que la función de navigate .
interface NavigateFunction { ( to: To, options?: { replace?: boolean; state?: any } ): void; (delta: number): void; }