在Next.js中导航到新页面的问题。

huangapple go评论70阅读模式
英文:

Issue with navigating to a new page in Next.js

问题

I am encountering an issue while attempting to navigate to a different page using the router.push function in Next.js.

Specifically, I am trying to use a variable named ChangePage to route to another page called "example.js" which consists of a single div element.

However, despite implementing the code, the desired navigation does not occur.

Here is the code snippet I am using:

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

I have already imported the necessary modules and defined the router variable using the useRouter hook. The button component is intended to trigger the navigation using the router.push function with the desired page path. However, when the button is clicked, no navigation occurs.

I would appreciate any guidance or insights on what might be causing this issue and how I can successfully navigate to the "example.js" page using router.push.

Thank you in advance for your assistance.

英文:

I am encountering an issue while attempting to navigate to a different page using the router.push function in Next.js.

Specifically, I am trying to use a variable named ChangePage to route to another page called "example.js" which consists of a single div element.

However, despite implementing the code, the desired navigation does not occur.

Here is the code snippet I am using:

&#39;use client&#39;
import Link from &quot;next/link&quot;;
import { useRouter, usePathname } from &quot;next/navigation&quot;;
import Image from &quot;next/image&quot;;
import kittycoin from &quot;../../public/kittycoin.png&quot;;
import kittyswap from &quot;../../public/kittyswap.png&quot;;

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

  const handleButtonClick = () =&gt; {
    router.push(&quot;/swap&quot;);
  };

  return (
    &lt;div className=&quot;flex flex-col items-center justify-center&quot;&gt;
      &lt;button
        type=&quot;button&quot;
        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}
      &gt;
        Swap Tokens
      &lt;/button&gt;

      &lt;div className=&quot;w-[300px]&quot;&gt;
        &lt;Image src={kittyswap} alt=&quot;Hero Image&quot; width={600} height={600} /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}

I have already imported the necessary modules and defined the router variable using the useRouter hook. The button component is intended to trigger the navigation using the router.push function with the desired page path. However, when the button is clicked, no navigation occurs.

I would appreciate any guidance or insights on what might be causing this issue and how I can successfully navigate to the "example.js" page using router.push.

Thank you in advance for your assistance.

答案1

得分: 0

要创建/swap路由,需要在app文件夹内创建一个名为swap的文件夹,然后在其中添加一个page.js文件,该文件将包含当前swap.js文件的内容(导向app/swap/page.js)。

这是因为在初始的pages路由中,一个文件创建一个路由,而自Next.js v13以来,当使用app路由时,路由是由一个文件夹和一个page.js创建的,用于渲染该路由,如文档所示:

在Next.js中导航到新页面的问题。

这里(参见最后一个问题)是CLI要求您选择要使用的路由器的位置:

在Next.js中导航到新页面的问题。

最后,如果您在跟随教程并希望使用pages路由,最简单的方法是创建一个新项目并根据CLI的提示回答:

npx create-next-app@latest 
英文:

To have a /swap route, you need to create a swap folder inside app, inside which you add a page.js file, which will contain the content of your current swap.js file (leading to app/swap/page.js).

That's because while with the initial pages router, a file creates a route, since Next.js v13, and when using the app router, a route is created by a folder and a page.js is used to render that route, as the doc shows it:

在Next.js中导航到新页面的问题。

Here is (see the last question) where the CLI asks you which one of the routers you want to use:

在Next.js中导航到新页面的问题。

Finally, if you are following along a tutorial and want to use the pages router, the easiest way is to create a new project and answer the CLI accordingly:

npx create-next-app@latest

huangapple
  • 本文由 发表于 2023年6月8日 19:42:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/76431508.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定