我如何使用相同的布局为每个页面，但改变内容组件通过URL路由在Next.js?

Question

我使用Typescript和Next.js

我想有一个单一的<Layout>为我所有的页面。在布局中，我有<Header>,<Footer>,<Sidenav>和<Content>组件。它看起来像这样:

interface LayoutProps {
children: ReactNode;
}
const Layout = ({ children }: LayoutProps) => {
return (
<Grid templateAreas={`"header header"
"side content"
"footer footer"`}
gridTemplateColumns={'250px 1fr'}>
<GridItem area={'header'}> <Header /></GridItem>
<GridItem area={'content'}> <Content>{children}</Content> </GridItem>
<GridItem area={'side'}><SimpleSidebar /> </GridItem>
<GridItem area={'footer'}><Footer /> </GridItem>
</Grid>
);
};
export default Layout;

我的index.tsx文件如下:

const Page: NextPageWithLayout = () => {
return <p>hello world</p>
}
Page.getLayout = function getLayout(page: ReactElement) {
return (
<ChakraProvider>
<Layout>
{ page }
</Layout>
</ChakraProvider>
)
}
export default Page

我试图改变基于URL的内容，使组件填充我的关于页面信息时，URL为https://example.com/about

我的_app.tsx是这样的:

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode
}
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
}
export default function App({ Component, pageProps }: AppPropsWithLayout) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? ((page) => page)
return getLayout(<Component {...pageProps} />)
}

我在谷歌上找不到任何关于如何做到这一点的信息。

Answer 1

你的代码在这个代码盒里运行得很好。

如果你正在寻找的是Layout呈现在每页面，你不应该使用这个getLayout图案，而只是在_app.tsx的Component周围渲染它。