Next.js Discord

Discord Forum

Navbar component keeps re-rendering whenever I navigate to a new page

Answered
Japanese cockle posted this in #help-forum
Open in Discord
Japanese cockleOP
I have a client component navigation bar that contains state for items being opened/closed. However, whenever I navigate to a new page, the navbar gets re-rendered and I lose all my state. I don't understand why this is happening.

Wondering if anyone would be willing to take a peek at [the code](https://github.com/connor-ricks/react-admin-skeleton) or pair with me for a few mins.

As a mobile dev by trade, I'm sure there is some core concept I'm not fully understanding or aware of.

TLDR of project structure...

- I have (dashboard) layout.js which is a server component that pulls all the necessary data I need and wraps the content in providers.
- The layout renders a Dashboard component which is a client component that takes in the page children from the layout.
- The Dashboard component renders the navbar/header and injects the children prop into the content.
Answered by Japanese cockle
I think the issue was that I was using the href prop on the Mantine NavLink instead of using an onClick that pushes using router.push
View full answer

1 Reply

Japanese cockleOP
I think the issue was that I was using the href prop on the Mantine NavLink instead of using an onClick that pushes using router.push
Answer