Next.js中如何基于Header菜单项实现路由导航？使用Link组件无效

要实现点击HeaderItem跳转路由，你可以通过以下步骤修改代码：

1. 更新HeaderItem组件，集成Link导航 #

在HeaderItem中导入Next.js的Link组件，接收href属性并将整个可点击区域包裹在Link内：

import React from "react";
import Link from "next/link"; // 导入Link组件

const HeaderItem = ({ Icon, title, href }) => {
  return (
    <Link 
      href={href} 
      className="group flex flex-col items-center cursor-pointer w-12 sm:w-20 hover:text-white"
    >
      <Icon className="h-8 w-8 mb-1 group-hover:animate-bounce" />
      <p className="tracking-widest group-hover:opacity-100 opacity-0">{title}</p>
    </Link>
  );
};

export default HeaderItem;

2. 在Header组件中为每个HeaderItem传递路由路径 #

给每个HeaderItem添加对应的href属性，指定要跳转的路由地址：

import React from "react";
import Image from "next/image";
import Link from "next/link";

import HeaderItem from "./HeaderItem";
import { RiHome8Line } from "react-icons/ri";
import { HiOutlineBadgeCheck } from "react-icons/hi";
import { BiSearchAlt2, BiUser } from "react-icons/bi";
import { BsCollectionPlay, BsLightning } from "react-icons/bs";

function Header() {
  return (
    <header className="flex flex-col sm:flex-row m-5 justify-between items-center h-auto">
      <div className="flex flex-grow justify-evenly max-w-2xl">
        <HeaderItem title="HOME" Icon={RiHome8Line} href="/" />
        <HeaderItem title="ACCOUNT" Icon={BiUser} href="/account" />
        <HeaderItem title="COLLECTION" Icon={BsCollectionPlay} href="/collection" />
        <HeaderItem title="SEARCH" Icon={BiSearchAlt2} href="/search" />
        <HeaderItem title="VERIFIED" Icon={HiOutlineBadgeCheck} href="/verified" />
        <HeaderItem title="TRENDING" Icon={BsLightning} href="/trending" />
      </div>
      <Image className="object-contain" src="https://press.hulu.com/wp-content/uploads/2020/02/hulu-white.png" alt="hulu logo" width={200} height={100} />
    </header>
  );
}

export default Header;

关键说明 #

• 之前直接在Header中用Link包裹HeaderItem可能失效的原因：HeaderItem的根元素是div，虽然事件冒泡理论上能触发Link跳转，但将Link直接作为HeaderItem的根元素，能确保点击区域的所有部分（图标和文字）都能触发导航，同时避免样式或事件传递的潜在问题。
• 确保你的Next.js项目中已创建对应路由的页面文件，比如/app/page.js对应/，/app/account/page.js对应/account（App Router），或者/pages/account.js对应/account（Pages Router）。

内容的提问来源于stack exchange，提问作者M.Lutfi Badila