Necesito redirigir a los usuarios usando onkeypress en nextjs.
Tengo una entrada de búsqueda donde los usuarios pueden escribir y luego presionar la tecla Intro para ir a la otra página.
const handler = (e) => { const ENTER = 13; if (e.keyCode === ENTER) // do a history.push("/news"); console.log("enter");};
<input onKeyPress={(e) => handler(e)} type="text" name="search" placeholder="Search by keywords" className="p-4 md:p-6 w-full py-2 md:py-4 border-2 text-lg md:text-2xl xl:text-3xl border-gray-400 outline-none filosofia_italic bg-white placeholder-gray-400" />Apreciaría tu ayuda.
Esto está cubierto por la documentación :
imperativo
next/link debería poder cubrir la mayoría de sus necesidades de enrutamiento, pero también puede realizar navegaciones del lado del cliente sin él, eche un vistazo a la documentación de next/router.
El siguiente ejemplo muestra cómo hacer navegaciones de página básicas con useRouter:
import { useRouter } from 'next/router' export default function ReadMore() { const router = useRouter() return ( <button onClick={() => router.push('/about')}> Click here to read more </button> ) }
Puede usar el useRouter desde el siguiente: https://nextjs.org/docs/api-reference/next/router
Intenta cambiar tu controlador a
import {useRouter} from "next/router"; const Component = () => { const router = useRouter(); const handler = (e) => { ... router.push("/news"); } return ( <input onKeyPress={handler} type="text" name="search" placeholder="Search by keywords" className="p-4 md:p-6 w-full py-2 md:py-4 border-2 text-lg md:text-2xl xl:text-3xl border-gray-400 outline-none filosofia_italic bg-white placeholder-gray-400" /> ) }