如何优化Next.js Link路由实现无刷新导航并解决404问题

我的导航栏组件代码（Header.js） #

'use client'

import { useState } from 'react';
import { GiHamburgerMenu } from 'react-icons/gi';
import Link from 'next/link';
import Image from 'next/image';

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <header className="bg-gray-800 p-4 fixed w-full top-0 z-10">
      <div className="container mx-auto flex justify-between items-center">
        <div className="flex items-center">
          <Link legacyBehavior href="/">
          <a>
          <Image
                src="/logo.svg"
                width={100}
                height={100}
                alt="logo"
                />
            </a>
          </Link>
        </div>
        <div className="md:hidden">
          <GiHamburgerMenu className="text-white text-2xl cursor-pointer" onClick={toggleMenu} />
        </div>
        <nav className={`md:hidden absolute top-16 left-0 w-full bg-gray-800 p-8 transition-all ${isOpen ? 'block' : 'hidden'}`}>
        <NavLink href="/" text="Home" onClick={toggleMenu} />
          <NavLink href="/menu" text="Menu" onClick={toggleMenu} />
          <NavLink href="/about" text="About" onClick={toggleMenu} />
          <NavLink href="/contact" text="Contact" onClick={toggleMenu} />
        </nav>
        <div className="md:flex md:ml-auto md:items-center hidden">
        <NavLink href="/" text="Home" />
          <NavLink href="/menu" text="Menu" />
          <NavLink href="/about" text="About" />
          <NavLink href="/contact" text="Contact" />
        </div>
      </div>
    </header>
  );
};

const NavLink = ({ href, text, onClick }) => (
  <Link legacyBehavior href={href}>
    <a className="text-white hover:text-gray-300 px-4 py-2 rounded-md block" onClick={onClick}>{text}</a>
  </Link>
);

export default Header;

首页代码（page.js） #

import Image from "next/image";
import Header from "./components/Header";
import HomeSection from "./components/HomeSection";
import Menu from "./components/Menu";

export default function Home() {
  return (
   <>
      <Header />
      <HomeSection />
      <Menu />
      </>
  );
}

问题与需求 #

• 如何优化代码实现无页面刷新的流畅导航？
• 点击导航栏的Menu链接时会跳转到404页面，怎么修复？
• 项目尚未完成，寻找合作者，有意者留下GitHub用户名或邮箱，我会添加你。

解决方案 #

一、修复Menu链接404问题 #

Next.js 13+ App Router模式下，页面文件需遵循路由目录规则：

• 在app目录下创建menu文件夹，内部新增page.js并编写Menu页面内容；
• 同理，about、contact页面也需要创建对应路由文件夹和page.js文件，否则访问对应路径会返回404。

二、优化无刷新流畅导航 #

你的代码已使用Next.js的Link组件（默认支持客户端无刷新导航），可做以下优化：

1. 简化Link组件写法
   Next.js 13+无需legacyBehavior属性，直接简化代码：
   修改NavLink组件：

const NavLink = ({ href, text, onClick }) => (
  <Link href={href} className="text-white hover:text-gray-300 px-4 py-2 rounded-md block" onClick={onClick}>
    {text}
  </Link>
);

同时修改Header中的Logo链接：

<Link href="/">
  <Image
    src="/logo.svg"
    width={100}
    height={100}
    alt="logo"
  />
</Link>

2. 添加导航活跃状态
   给当前路由的链接加高亮样式，提升用户体验：
   在NavLink中引入usePathname钩子（Header已标记为客户端组件，可直接使用）：

'use client'
import { usePathname } from 'next/navigation';

const NavLink = ({ href, text, onClick }) => {
  const pathname = usePathname();
  const isActive = pathname === href;

  return (
    <Link 
      href={href} 
      className={`px-4 py-2 rounded-md block ${isActive ? 'text-gray-300 font-bold' : 'text-white hover:text-gray-300'}`} 
      onClick={onClick}
    >
      {text}
    </Link>
  );
};

3. 保留移动端菜单关闭逻辑
   当前点击导航链接后关闭菜单的逻辑无需改动，已满足移动端使用需求。

内容的提问来源于stack exchange，提问作者Lewis Wachira