Tengo una aplicación NextJS. Quiero agregar una función que pueda redirigir a cualquier página usando el enrutamiento nextjs.
Por ejemplo, después de finalizar el registro, quiero redirigir a una página determinada.
Si creo esta función (reutilizable en todas partes):
import { useRouter } from 'next/router' const goTo = (href) => { const router = useRouter() router.push(href) }Quiero agregar esto a mi lógica de registro, el problema es que rompo las reglas de React Hooks:
react-dom.development.js?ac89:14906 Error no detectado (en promesa): Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:
- Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
- Podrías estar rompiendo las Reglas de los Hooks
- Es posible que tenga más de una copia de React en la misma aplicación Consulte https://reactjs.org/link/invalid-hook-call para obtener consejos sobre cómo depurar y solucionar este problema.
Y efectivamente useRouter es un React Hook, y estoy tratando de llamarlo fuera de una función React, como se estipula aquí https://reactjs.org/docs/hooks-rules.html , no funcionará.
¿Cómo puedo tener una solución de enrutamiento para que NextJS se pueda llamar en Javascript normal?
Entonces, si está usando únicamente React.js (sin Next.js encima), puede hacerlo de esta manera:
Import React from 'react' export const handleRoutes = (url) => { const history = React.useHistory() return history.push(url)}
Luego, importaría esta función js regular en cualquiera de sus archivos de reacción, así:
import { handleRoutes } from 'fileName.js' <button onClick={() => handleRoutes("/routeToBeRedirectedTo")}> Click to redirect </button>Sin embargo, cuando uso Nextjs, no estoy seguro de que la forma anterior funcione. Mi método personal sería simplemente implementar esta función (en un archivo utility.js):
export const handleRedirect = (router, url) => { return router.push(url)}Luego, solo importe la función y el enlace useRouter en el archivo que desee:
import { handleRedirect } from "./utility.js" import { useRouter } from "next/router" const router = useRouterLuego, dentro de su declaración de devolución JSX:
<button onClick={() => handleRedirect(router, "/routeToBeRedirectedTo")}> Click to redirect </button>Y si es una redirección después de iniciar sesión/registrarse, simplemente useEffect así:
// depends if you're storing your user credentials in your local storage or cookies, this example below would be if your User credentials are stored in localstorage const user = JSON.parse(localstorage.getItem("user")) UseEffect(() => { if (user) return handleRedirect(router, "/routeToBeRedirectedTo") }, [user])