Does the _layout.jsx file rerender when you go to another page using <Link> or <NavLink>?

[684efs3]

I am trying to create a sidebar, whose state and scroll position does not change when the user navigates to other pages, all using the same _layout.jsx file.

However when I go to another page, the sidebar's state (in this case, the tabs which are open) resets and its scroll resets to the top of the page. Is this the expected behavior? If not, how can I keep its state?

I have tried using context, zustand and jotai, but all of these states reset when I change the page. I was under the impression that the component does not mount and remount when using a or .

For context, I am trying to create a sidebar with similar properties to this.

Thank you!

[kiliman]

Yes, Remix will re-render your app on navigation.

The <NavLink> component is supposed to render the active route based on the to prop and current location.

As for scroll location, the <ScrollRestoration> component only handles the overall window scroll position. If you have an element with overflow: scroll, you can use the package by Kent C. Dodds.

https://github.com/epicweb-dev/restore-scroll