我在尝试使用Next.js中的router.push函数导航到其他页面时遇到了问题。
具体来说，我尝试使用一个名为ChangePage的变量来路由到另一个名为“example.js”的页面，该页面由单个div元素组成。
然而，尽管实现了代码，但并未实现所需的导航。
下面是我使用的代码片段：

'use client'
import Link from "next/link";
import { useRouter, usePathname } from "next/navigation";
import Image from "next/image";
import kittycoin from "../../public/kittycoin.png";
import kittyswap from "../../public/kittyswap.png";

export default function Home() {
  const router = useRouter();

  const handleButtonClick = () => {
    router.push("/swap");
  };

  return (
    <div className="flex flex-col items-center justify-center">
      <button
        type="button"
        className={`h-14 w-48 px-4 py-2 border border-transparent font-bold text-xl text-center rounded-2xl text-[#f1f1f1] bg-[#320000] hover:bg-[#230100] focus:outline-none focus:ring-2 focus:ring-orange-600 focus:ring-opacity-50 transition ease-in-out duration-200`}
        onClick={handleButtonClick}
      >
        Swap Tokens
      </button>

      <div className="w-[300px]">
        <Image src={kittyswap} alt="Hero Image" width={600} height={600} />
      </div>
    </div>
  );
}

我已经导入了必要的模块，并使用useRouter钩子定义了路由器变量。按钮组件用于使用router.push函数触发具有所需页面路径的导航。但是，单击按钮时，不会进行导航。
我将感谢任何关于可能导致此问题的原因以及如何使用router.push成功导航到“example.js”页面的指导或见解。
提前感谢您的帮助。