next.js 在单独的标题组件中的动态页面标题

whitzsjs 于 2023-06-29 发布在其他

关注(0)|答案(2)|浏览(248)

所以我几天前才开始做这个项目，现在它基本上是一个导航栏，一个标题，和一个路由（页面）容器。
我的标题是在一个单独的组件从网页组件和标题是应该显示的网页标题在哪里目前。
如何在header组件中动态显示当前页面的标题？
我已经尝试过了，但它显然返回的路径名，而不是一个页面标题，就像我想要的

export default function header() {
  const route = useRouter()

  return (
    <header className='header'>
      <h1 className='page-title'>{route.asPath}</h1>
      <div className='header-icons'>
        <div className='header-icon'><Notifications_icon /></div>
        <div className='header-icon'><User_icon /></div>
      </div>
    </header>
  )
}

next.js

来源：https://stackoverflow.com/questions/73126511/dynamic-page-title-in-separate-header-component

2条答案

按热度按时间

jfgube3f1#

也许你可以使用document.titlehttps://developer.mozilla.org/en-US/docs/Web/API/Document/title
或者你把你想要的标题作为 prop 传递给'next/head'标签

import Head from 'next/head';

const Page = () =>(
<>
  <Head>
    <title>{text}</title>
  </Head>
  <Header title={text} />
</>
)

export default Page

赞(0）回复(0）举报 2023-06-29

bvuwiixz2#

我能够通过将应用程序 Package 在布局组件中并为每个组件命名来实现这一点，然后通过将props向下传递到头部来完成它。
这是我的app组件：

export default function App({ Component, pageProps }: AppProps) {

return (
        <Layout>
          <Component {...pageProps} />
        </Layout>
  );
}

布局构件：

export default function Layout({ children }: LayoutProps) {
  const PageName: string = (children as any).type.displayName;
  return (
    <>
  <Head>
    <title>{PageName}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </Head>
   <main>
     {children}
    <Footer />
  </main>
    </>
  );
}

您可以在其中添加标题组件，并将页面名称作为prop传递。现在剩下唯一要做的事情，就是后藤每个页面和页面外（页面文件中的主函数）函数。使用以下方法为页面命名：

Page.displayName = "Page Name";

这也适用于生产。

赞(0）回复(0）举报 2023-06-29

我来回答

next.js 在单独的标题组件中的动态页面标题

2条答案

相关问题

热门标签

最新问答