Next.js 13服务端组件：如何仅在首页显示Hero组件及路由问题解决

问题根源 #

1. 你的Header组件默认是服务器组件，但useRouter/usePathname是客户端专属钩子，必须在客户端组件中使用
2. Next.js 13+的next/navigation里，useRouter不再提供pathname属性，需要用usePathname钩子单独获取当前路径
3. 你的条件判断逻辑写反了：原本要在首页（/）显示Hero，其他页面隐藏，但代码里写的是pathname != "/"时显示Hero

修改后的代码 #

'use client' // 标记为客户端组件
import { usePathname } from 'next/navigation'
import Navbar from './Navbar' // 确保组件导入路径正确
import Hero from './Hero' // 确保组件导入路径正确

export const Header = (props) => {
  const pathname = usePathname()

  return (
    <header className={props.classes}>
      <Navbar />
      {/* 仅在首页显示Hero组件 */}
      {pathname === "/" && <Hero />}
    </header>
  )
}

export default Header

关键说明 #

• 'use client'指令：必须放在文件最顶部（导入语句之前），告诉Next.js这个组件要在客户端渲染，才能使用客户端钩子
• usePathname钩子：专门用于获取当前路由的路径字符串，替代旧版router.pathname
• 简化条件渲染：用逻辑与运算符&&替代if-else写法，代码更简洁，逻辑更清晰

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