Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Next.js using Link in client component back to other page doesn't apply layout

EDIT:
I’ve found what was messing up. I was wrapping my subpages return elements into main layout component. My bad. Thanks for answers guys.

so I have a problem with the Link component. I have an app directory with layout.tsx, page.tsx, and directory /about. When I’m using Link in page.tsx to go to /about it works fine, layout is applied. In about I have client component. In that component when I use Link with href=’/’ to go back to the main page components from page.tsx are applied but layout.tsx is not. I’ve added console logs to the layout and page. When I’m trying to go back from /about none of the console logs is displayed in the terminal. Here is the code:
layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  console.log('layout')
  return (
    <html lang="en">
      <head></head>
      <body className={styles.main}>
          <VideoBackground />
          {children}
      </body>
    </html>
  )
}

page.tsx:

export default async function Page() {
  const plants = await getPlants()
  console.log('plants page')
  return (
        <PlantsGrid 
          plants={plants}
        />
  );
}

and link in client component:

<div className={styles.RightContent}>
          <div className={styles.Button} onClick={props.update ? updatePlant : sendNewPlant}>{props.update ? 'Zapisz' : 'Dodaj'}</div>
          <Link href='/'><div className={styles.CancelButton}>{changesMade ? 'Anuluj' : 'Wróć'}</div></Link>
        </div>
      </div>

I’ve tried using <a> and it worked but I want to know why going back with Link isn’t working

Tags:

2

Answers


  1. 0

    It maybe because of hydration issue. Since layout render on server and Link is inside a client component.
    Client components sometimes cause unpredictable issues with the nextjs App router layout

    you can try navigating with useRouter() hook instead of Link

    import {useRouter} from 'next/navigation';

     const ClientComponent = () => {
     
        const router = useRouter();
       
        return (
           <div className={styles.RightContent}>
            <div className={styles.Button} onClick={props.update ? updatePlant : 
              sendNewPlant}>{props.update ? 'Zapisz' : 'Dodaj'}</div>
            <div className={styles.CancelButton} onClick={() => router.push('/')}>
               {changesMade ? 'Anuluj' : 'Wróć'}
            </div>
           </div> 
         );
    };
    Login or Signup to reply.
  2. 0

    When you navigate from /about to the home page using the Link component, Next.js caches data that has not been changed, and when you return to the home page, the layout.tsx component may not redraw. This happens because Next.js is trying to optimise the rendering and avoid unnecessary redraws.
    There is also a problem that Next.js has bugs with the use of the Link component (this component is overly fussy), there are cases when the pre-rendering is done incorrectly. There is nothing wrong with not using the Link component in a particular place if it leads to a bug.

    Your I gave the answer why you don’t get a new message in the console. In order to help you with Link not working correctly, I need to see how you use it. The code you sent doesn’t use the link component in either layout.tsx or page.tsx.

    If you needed to know why it doesn’t output messages to the console, that’s the answer, if you want to solve the bug, send more detailed code.

    I would also suggest you try using React.forwardRef, as the Link component is unnecessarily preverdly nested (you’re putting a div in Link). Here’s an article on the Next.js doc that talks about how to handle nesting (it certainly talks about nesting components in Link, but I’ve had a similar problem a few times when trying to nest a div in Link – Link to the article from the Next.js documentation)

    I’m waiting for more detailed code, but if the problem is solved, I’m happy 🙂

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

Back To Top
Search