Matchu
17a7e2de81
Okay, when I saw the recipe in the Next.js docs with `getLayout`, I was like "psh this API is so confusing, this should just be a component" anyway now we see why it wasn't a component: the _whole point_ of it was to circumvent the usual React diffing algorithm's belief that two different components _can't_ ever share UI. But here we were, making different `layoutComponent`s that were meant to share UI, lol! Anyway, if you just _return JSX in a function_, the React diffing algorithm never sees that it came from a different place, so it's generous when diffing them. Neat! But I still changed the recipe's `getLayout` name to `renderWithLayout`, because it just confused me so much at first lol, I thought it was going to like, return a layout function? This is much clearer verbing to me imo
19 lines
565 B
TypeScript
19 lines
565 B
TypeScript
import ItemSearchPageToolbar from "../../../src/app/components/ItemSearchPageToolbar";
|
|
import ItemSearchPage from "../../../src/app/ItemSearchPage";
|
|
import PageLayout from "../../../src/app/PageLayout";
|
|
import type { NextPageWithLayout } from "../../_app";
|
|
|
|
const ItemSearchPageWrapper: NextPageWithLayout = () => {
|
|
return <ItemSearchPage />;
|
|
};
|
|
|
|
ItemSearchPageWrapper.renderWithLayout = (children) => {
|
|
return (
|
|
<PageLayout>
|
|
<ItemSearchPageToolbar marginBottom="6" />
|
|
{children}
|
|
</PageLayout>
|
|
);
|
|
};
|
|
|
|
export default ItemSearchPageWrapper;
|