如何在Next.js 13中仅隐藏首页侧边栏的MenuAlt组件？

你之前用useRouter没生效，大概率是选错了路由模块——Next.js 13+的App Router（也就是你用layout.tsx的这套）里，路由API是next/navigation下的，不是旧Pages Router的next/router。按下面步骤修改即可：

1. 导入App Router专属的usePathname钩子（用来直接获取当前路径）
2. 在Sidebar组件里判断当前路径是否为首页（/）
3. 条件渲染MenuAlt组件，仅非首页显示

修改后的完整代码：

import Link from "next/link"
import MenuAlt from "../MenuAlt/MenuAlt"
import { usePathname } from 'next/navigation' // 导入正确的路径钩子

export default function Sidebar() {
  const pathname = usePathname() // 获取当前页面路径

  return (
    <div className="flex flex-col justify-between w-40 h-screen py-12 text-sm font-semibold leading-tight text-center text-white align-middle bg-black border-black">
      {/* 仅非首页时渲染MenuAlt */}
      {pathname !== '/' && <MenuAlt/>}
      <Link
          className="hover:scale-110"
          href="/">
          JOGO DA MOBILIDADE ATIVA
      </Link>
    </div>
  )
}

额外说明 #

如果你的项目是旧版Pages Router（用_app.tsx而非layout.tsx），才需要用next/router的useRouter，但你明确提到用了layout.tsx，所以必须用next/navigation下的API。usePathname是App Router里专门用来获取当前路径的钩子，比useRouter()里的pathname更直观。

内容的提问来源于stack exchange，提问作者Ana Caroline Azevedo