2024-01-12 00:01:44 +01:00
|
|
|
|
import type { NextPageWithLayout } from "./_app";
|
|
|
|
|
import Layout from "../components/layout";
|
|
|
|
|
import Sidebar from "../components/sidebar";
|
2017-01-05 22:03:36 +01:00
|
|
|
|
|
2022-10-26 22:28:55 +02:00
|
|
|
|
const Contact: NextPageWithLayout = () => {
|
2020-05-18 23:44:18 +02:00
|
|
|
|
return (
|
2021-06-29 05:19:15 +02:00
|
|
|
|
<section>
|
|
|
|
|
<h2>Layout Example (Contact)</h2>
|
|
|
|
|
<p>
|
|
|
|
|
This example adds a property <code>getLayout</code> to your page,
|
|
|
|
|
allowing you to return a React component for the layout. This allows you
|
|
|
|
|
to define the layout on a per-page basis. Since we're returning a
|
|
|
|
|
function, we can have complex nested layouts if desired.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
When navigating between pages, we want to persist page state (input
|
2022-02-13 01:22:52 +01:00
|
|
|
|
values, scroll position, etc.) for a Single-Page Application (SPA)
|
2021-06-29 05:19:15 +02:00
|
|
|
|
experience.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
This layout pattern will allow for state persistence because the React
|
|
|
|
|
component tree is persisted between page transitions. To preserve state,
|
|
|
|
|
we need to prevent the React component tree from being discarded between
|
|
|
|
|
page transitions.
|
|
|
|
|
</p>
|
|
|
|
|
<h3>Try It Out</h3>
|
|
|
|
|
<p>
|
2024-01-12 00:01:44 +01:00
|
|
|
|
To visualize this, try tying in the search input in the{" "}
|
2021-06-29 05:19:15 +02:00
|
|
|
|
<code>Sidebar</code> and then changing routes. You'll notice the input
|
|
|
|
|
state is persisted.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
2024-01-12 00:01:44 +01:00
|
|
|
|
);
|
|
|
|
|
};
|
2021-06-29 05:19:15 +02:00
|
|
|
|
|
2024-01-12 00:01:44 +01:00
|
|
|
|
export default Contact;
|
2022-10-26 22:28:55 +02:00
|
|
|
|
|
|
|
|
|
Contact.getLayout = function getLayout(page: React.ReactElement) {
|
2021-07-20 16:02:51 +02:00
|
|
|
|
return (
|
|
|
|
|
<Layout>
|
|
|
|
|
<Sidebar />
|
|
|
|
|
{page}
|
|
|
|
|
</Layout>
|
2024-01-12 00:01:44 +01:00
|
|
|
|
);
|
|
|
|
|
};
|