Hello folks,

I have a NextJS project with a straightforward layout: a header, a left-side component, and a right-side component.

The right-side component is a stable canvas stage, while the left-side component handles numerous operations like API calls, displaying results, search functions, listing items, etc.

Currently, I'm rendering all of this in one route, but I'm wondering if there's a way to manage these multiple states across different routes while maintaining the same layout.

Any advice would be greatly appreciated!

left side bar code looks like

    {
        isA?
        <Acomponent />
        : isB?
        <Bcomponent />
        : isC?
        <Ccomponent />
        : isD?
        <Dcomponent />
        : isE?
        <Ecomponent />
        : isF?
        <Fcomponent />
        : isG?
        <Gcomponent />
        : null
      }