#Layout state is not preserved when going to from / to nested page

13 messages · Page 1 of 1 (latest)

marble silo
#

Hi there, not sure what's going on or if i made a mistake, but

Here's is my pages folder (for the sake of the simplicity i'll leave out all the unnecessary stuff)

index.tsx
prices/index.tsx
prices/example.tsx

I configured layout for each page with navbar/footer following typescript example from this page https://nextjs.org/docs/basic-features/layouts

when i'm switching route like this index->prices/index
the state of navbar is preserved and everything works as expected

when i'm doing index->prices/example state of navbar is lost and my layout is slightly broken

same thing happens when i open new browser tab and go to prices/example

and if i do index->prices/index->prices/example it works as expected, am i missing here something?

Basic Features: Layouts | Next.js

Learn how to share components and state between Next.js pages with Layouts.

mental pewter
#

use app instead of pages dir

marble silo
#

I'm not using beta release

#

Or is this layout thing with preserved state is only available on beta? The docs i linked are for stable version and they do say that its component state will be preserved

mental pewter
#

oh indeed, sharing layout is possible in stable... sorry

#

do you have a components/layout.tsx ?

marble silo
#

Yeah, it's named differently, but yes, the feature works fine, it's just that when i end up on nested page state is lost and also something weird happens

return (
    <>
      <DynamicNavbar />
      <main className={styles.main}>{children}</main>
      <DynamicFooter />

      <Overlay>
        <DynamicScrollTopButton />
        <DynamicHelpButton />
      </Overlay>
    </>
  );

Here's what inside of my layout, so it should return these components without any wrappers

first screenshot is how it normally looks in DOM

second screenshot is what happens when i go directly to prices/example

so out of nowhere this div wrapper appears, which shouldn't be there, weird

Screenshot_2023-03-23_at_18.48.02.png Screenshot_2023-03-23_at_18.48.50.png
mental pewter
#

ok. and the only place you are importing the layout is in pages/_app.js ?

marble silo
#

Because i'm using per-page layout i'm importing it in all of the pages that need that layout

#

This is how prices/index.tsx looks


...
const Prices: NextPageWithLayout = () => {
//component
}
...
Prices.getLayout = function getLayout(page: React.ReactElement) {
  return <UnauthorizedUserLayout>{page}</UnauthorizedUserLayout>;
};

export default Prices;
mental pewter
#

Is prices/example.tsx also using the same layout pattern?

marble silo
#

Yep, i'm in process of creating codesandbox playground, i will post my results if i'll be able to reproduce my problem there