regarding usePathName from next/navigation

Answered

Philadelphia Vireo posted this in #help-forum

Philadelphia VireoOP

2024-02-22T17:34:08.000Z

i want to know, in my root layout.tsx file, how can i fetch the usePathName cuz ir requires "use client" directive at top
which i cant use in the layout.tsx file because it is exporting metadata and is disallowed

Answered by American Chinchilla

so the navbar file presumably will look something like this

"use client"
import { usePathname } from 'next/navigation';

export default function NavBar() {
  const currPath = usePathname();
  //...
}

View full answer

30 Replies

American Chinchilla

2024-02-22T17:38:59.000Z

@Philadelphia Vireo in what context is it needed? if it's for a navbar i usually just make that a client component, and do the usePathName there

Philadelphia VireoOP

2024-02-22T17:42:13.000Z

yes i need it for the navbar

but how do u make it a client component?
while exporting metadata
it does not allow layout.tsx to be a client component?!?

American Chinchilla

2024-02-22T17:43:13.000Z

make a navbar in a new file with the "use client" directive

import the navbar into layout.tsx

Philadelphia VireoOP

2024-02-22T17:43:35.000Z

ok
then

i am already doing what u just saidðŸ‘

i want to alter my navbar ui based on some specific routes

thats what i specifically want

American Chinchilla

2024-02-22T17:45:36.000Z

Can I see code?

Philadelphia VireoOP

2024-02-22T17:49:19.000Z

"use client"
import { Inter } from 'next/font/google'
import './globals.css'
import NavBar from '@/components/Navbar/navbar'
import { cn } from '@/lib/utils'
import { usePathname } from 'next/navigation'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Ecommerce',
}


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const pathName=usePathname();

  return (
    <html lang="en">
      <body className={cn(inter.className,"bg-gray-300")}>
        <NavBar currentPath={pathname}/>
        {children}
        </body>
    </html>
  )
}

American Chinchilla

2024-02-22T17:50:14.000Z

oh okay i see what you're doing

we're not going to usePathname at all in this file

remove these:

"use client"

Philadelphia VireoOP

2024-02-22T17:50:46.000Z

okk tell

American Chinchilla

2024-02-22T17:50:47.000Z

import { usePathname } from 'next/navigation'

const pathName=usePathname();

currentPath={pathname}

then in your navbar component add those

Philadelphia VireoOP

2024-02-22T17:52:18.000Z

ohh okay
so when it gets rendered it will fetch the pathname itself right?

it will not give error cuz its in the components folder and not in my app router directory??

American Chinchilla

2024-02-22T17:52:51.000Z

it wont give an error, it's being called from the app router so it has that context if that makes sense

Philadelphia VireoOP

2024-02-22T17:53:08.000Z

got it got itðŸ‘
lemme try

American Chinchilla

2024-02-22T17:53:12.000Z

so the navbar file presumably will look something like this

"use client"
import { usePathname } from 'next/navigation';

export default function NavBar() {
  const currPath = usePathname();
  //...
}

Answer

Philadelphia VireoOP

2024-02-22T17:53:28.000Z

greatðŸ‘
lemme try

@American Chinchilla Thanks broðŸ¤œðŸ¤›
Got it rightðŸ‘

American Chinchilla

2024-02-22T17:57:51.000Z

yep!

@Philadelphia Vireo <@281970530037268480> Thanks broðŸ¤œðŸ¤› Got it rightðŸ‘

American Chinchilla

2024-02-22T17:59:26.000Z

could you mark as solved?

Philadelphia VireoOP

2024-02-22T18:00:04.000Z

sure
how?

American Chinchilla

2024-02-22T18:00:30.000Z

right click on message with solution > apps > mark solution