así que este es mi código:
import Router from "next/router"; import React from "react"; export default function MainIndex() { return (<React.Fragment> <h1>Main Index Page</h1> <button onClick={() => Router.push('/family')}>Family</button> <button onClick={() => Router.push('/dynamic-id-page')}>Dynamic-id-page</button><br /><br /> <button onClick={() => Router.push('/fav-games')}>World Of WarCraft</button> </React.Fragment>); }Mi pregunta es: ¿Cómo puedo crear una función para poder usarla como devolución de llamada para diferentes rutas?
Deberías usar "useRouter":
import {useRouter} from "next/router"después
export default function MainIndex() { const router = useRouter(); const navigate = (event) => (url) => router.push(url) ...}Después
<button onClick={navigate("/family")}> Family </button>Pero tenga en cuenta que este tipo de "optimización" no es realmente una... La función en línea en su código original es más fácil de entender y la optimización prematura es la raíz de todos los males.