Next.JS如何将参数传递给回调function

Question

所以这是我的代码：

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>);
}

我的问题是：如何创建 function 以便可以将其用作不同路由的回调。

Answer 1

您应该使用“useRouter”：

import {useRouter} from "next/router"

然后

export default function MainIndex() {
  const router = useRouter();
  const navigate = (url) => router.push(url)
...}

然后

<button onClick={() => navigate("/family")}> Family </button>