如何使用 next.js 13 仅隐藏主页导航栏上的组件？

Question

我即将完成本科学位，并创建一个网站作为课程的期末项目来推广我的研究。我正在学习 next.js 就是为了这个。

我的layout.tsx中有这个侧边栏，但我想仅在主页上隐藏“menuAlt”组件。我已经做了很多研究，但还没有找到解决方案。有人知道如何帮助我吗？谢谢。

import Link from "next/link"
import MenuAlt from "../MenuAlt/MenuAlt"



export default function Sidebar() {
    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/>
        <Link
            className="hover:scale-110"
            href="/">
            JOGO DA MOBILIDADE ATIVA
            </Link>
    </div>
    )
}

我尝试过使用路由器，但它似乎无法工作，不知道我做错了什么。

Answer 1

 'use client'
 
import { usePathname } from 'next/navigation'
import Link from "next/link"
import MenuAlt from "../MenuAlt/MenuAlt"

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">
        {pathname !== 'homepage-path' && <MenuAlt/>}
        <Link
            className="hover:scale-110"
            href="/">
            JOGO DA MOBILIDADE ATIVA
            </Link>
    </div>
    )
}