Question

我在nextjs中使用此布局模式，因为这似乎是避免重新渲染布局的推荐方法，但是如果看不到如何更新布局标题中的页面标题，我将<head><title>Page Name</title></head>放入一个组件中，使其在错误的位置呈现。

如何使用此模式更新页面标题？

_app.js

从'react'导入React 从“下一个/应用”导入应用从“ ../components/Layout”导入布局

const MyApp = ({ Component, pageProps }) => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

Layout.js

const Layout = ({ children }) => (
  <div className='layout'>
    <GlobalStyle />
    <Head>
      <link rel="preconnect" href="https://app.snipcart.com" />
      <link rel="preconnect" href="https://cdn.snipcart.com" />
      <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.19/default/snipcart.css" />
    </Head>
    <Wrap>
    <Spacer />
    <Header />
    <MainWrap>
      {children}
    </MainWrap>
    <script async src="https://cdn.snipcart.com/themes/v3.0.19/default/snipcart.js" />
    <div hidden id="snipcart" data-api-key="" />
    </Wrap>
  </div>
)

export default Layout

在nextjs中使用持久布局

0 个答案: