Next/Link在组件中跳转页面时持续刷新的问题咨询

API 探路者

2026-8-6

Next.js Link组件无刷新跳转问题解决

不需要将组件放在pages文件夹中，Next/Link的无刷新跳转功能和组件所在目录完全无关，你的问题出在Link组件的使用方式上。

问题原因

在Pages Router版本的Next.js中，<Link>组件需要包裹原生的<a>标签才能实现无刷新路由跳转。你当前的代码直接将文本放在<Link>内部，没有绑定到可点击的锚点元素，浏览器会将其当作普通文本点击触发默认跳转行为，导致页面刷新。

另外，路由路径建议使用绝对路径（比如/about而非about），相对路径可能在不同页面下解析出错，引发不必要的页面刷新。

修正后的代码

import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="bg-black flex justify-between p-5 text-white">
      <h1 className="font-bold text-sky-400">
        <Link href="/">
          <a>Furniture App</a>
        </Link>
      </h1>
      <div>
        <Link href="/about">
          <a>About</a>
        </Link>
        <Link href="/promos">
          <a>Promos</a>
        </Link>
      </div>
    </nav>
  );
}