UPDATE: After some investigation, I finally identified the issue. It turns out that I mistakenly wrapped my subpages return elements into the main layout component. Thank you all for your input!
Currently, I am facing a challenge with the Link component in my application. Within my app directory, I have files named layout.tsx, page.tsx, and a directory called /about. When I utilize Link in page.tsx to navigate to /about, everything works smoothly as the layout is applied. However, within the 'about' section, there is a client component. In this component, when I use Link with href='/' to return to the main page, components from page.tsx are applied but not the layout.tsx. To debug this issue, I added console logs to both the layout and page. Strangely, none of these logs appear in the terminal when attempting to go back from /about. Here is the relevant code snippet: 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 ? 'Save' : 'Add'}</div>
<Link href='/'><div className={styles.CancelButton}>{changesMade ? 'Cancel' : 'Go Back'}</div></Link>
</div>
</div>
I did try using <a> and that seemed to work fine. However, I am curious about why going back with Link isn't functioning properly.