The main page

Here is used the simplest layout:

export default pageComponentWithLayout(
  function Page() { /* ... */ },
  function PageLayout({ PageComponent, pageProps }) {
    // Data loading simulation
    const [pathParts, setPathParts] = useState<
      { title: string; path: string }[]
    >([]);
    useEffect(() => {
      setTimeout(() => {
        setPathParts([{ title: "Main", path: "/" }]);
      }, 1000);
    }, []);

    return (
      <Layout key="layout">
        <Navbar key="navbar" />
        <Breadcrumbs key="breadcrumbs" pathParts={pathParts} />
        <PageComponent {...pageProps} />
      </Layout>
    );
  }
);
          

You may notice that I am using the key property. It is needed to help React determine which part of the layout is added or removed without the need to re-render it. I'll google for you.

Please check the page with sidebar that has nested fullscreen route: Page with a sidebar

Please check the page with error hadling that alternates layout: Page without error, Page with error

Please check the page with params validation that alternates layout: Page without error, Page with error