Question 185879 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to hide a component only on home navbar using next.js 13?

I’m finishing my undergraduate degree and creating a website as my course’s final project to promote my research. I’m learning next.js just for this.

I have this sidebar in my layout.tsx, but I want to hide the "menuAlt" component only on the homepage. I’ve done quite a bit of research and haven’t found a solution yet. Would anyone know how to help me? Thank you.

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

I’ve tride to useRouter, but it can’t seem to work, don’t know what i’m doing wrong.

Tags:

2

Answers


  1. 0 
     '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>
    )
}
    Login or Signup to reply.
  2. 0

    To conditionally hide the MenuAlt component on the homepage while using Next.js, you can utilize the useRouter hook provided by Next.js. Here’s an example of how you can achieve that:

    import { useRouter } from 'next/router';
import Link from 'next/link';
import MenuAlt from '../MenuAlt/MenuAlt';

export default function Sidebar() {
 const router = useRouter();
 const isHomePage = router.pathname === '/';

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

    In this example, we import the useRouter hook from next/router. Then, we use useRouter to access the pathname property of the router object, which represents the current page’s URL.

    We define the isHomePage variable by comparing the pathname with ‘/’, which is the homepage URL. If the current page is the homepage, isHomePage will be true; otherwise, it will be false.

    Finally, we use a conditional rendering technique with the logical AND operator (&&) to conditionally render the MenuAlt component. If isHomePage is false, the MenuAlt component will be rendered. If isHomePage is true, the MenuAlt component will not be rendered.

    This way, the MenuAlt component will only be hidden on the homepage. On other pages, it will be displayed as usual.

    Make sure you have the next/router package installed, and you’re using it within a component that is part of the Next.js application’s page structure.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search