Reactjs 如何在next.js 13中仅在主页导航栏上隐藏组件

发布于06月14日

我正在完成我的本科学位，并创建了一个网站，作为我课程的期末项目，以促进我的研究.我学习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>
    )
}

我试过使用路由，但它似乎不能工作，不知道我做错了什么.

推荐答案

 '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>
    )
}

Reactjs相关问答推荐

为什么VScode中的React应用程序无法识别文件夹 struct ？

迁移到React Router Dom v6后，我是否错误地使用了Link组件？

使用Overpass API Endpoint计算 map 上的面积

在一个blog函数中调用setState钩子

Reactjs 如何在next.js 13中仅在主页导航栏上隐藏组件

推荐答案

Reactjs相关问答推荐

为什么VScode中的React应用程序无法识别文件夹 struct ？

迁移到React Router Dom v6后，我是否错误地使用了Link组件？

使用Overpass API Endpoint计算 map 上的面积

在一个blog函数中调用setState钩子

防止在Reaction中卸载

Reaction中的数据加载不一致

如何在整个应用程序中显示通用弹出窗口中的点击事件

react 挂钩-使用有效澄清

子路径上未定义useMatches句柄

useEffect不重新渲染

React 错误：只能用作元素的子元素，从不直接渲染.请将您的包裹在中

react ：输入失go 焦点，输入一个字符，

i18next中复数键的理解

useState数组不更新

FlatList 不在 React Native 中呈现项目

react-router v6 中的 BrowserRouter 和 createBrowserRouter 有什么区别？我可以在不使用数据 API 的情况下使用 createBrowserRouter 吗？

有没有办法根据 Rechart 中的 activeDot 更改值？

使用 useRef(uuid()) 的目的是什么？

为什么我在运行一些 npm react 命令时会收到这些警告？

单击当前子div时如何更改p标签的图像和样式？react