Javascript 在Nextjs/react应用程序中更新元标记_Javascript_Html_Reactjs_Next.js

Javascript 在Nextjs/react应用程序中更新元标记

javascript html reactjs next.js

Javascript 在Nextjs/react应用程序中更新元标记,javascript,html,reactjs,next.js,Javascript,Html,Reactjs,Next.js,我试图使一个网站的搜索引擎优化，我不允许使用任何第三方图书馆。我想用动态描述更新元描述的内容。我做了一切，它应该是工作，但要改变它，我需要重新加载的网页，这是不是真的有效，我想这样做，每当网页重新阅读这就是标题：我删除了大部分代码，只留下了您需要的东西 const AppHead = ({pageTitle = "", canonicalUrl, metaDescription = ''}) => { return ( <Head>

我试图使一个网站的搜索引擎优化，我不允许使用任何第三方图书馆。我想用动态描述更新元描述的内容。我做了一切，它应该是工作，但要改变它，我需要重新加载的网页，这是不是真的有效，我想这样做，每当网页重新阅读

这就是标题：我删除了大部分代码，只留下了您需要的东西

const AppHead = ({pageTitle = "", canonicalUrl, metaDescription = ''}) => {
    return (
        <Head>
         <meta name="description" content={metaDescription ? metaDescription : 'Prettyshop'} />
         <title>{pageTitle ? `${pageTitle}` : "Prettyshop"}</title>
        </Head>

const AppHead=（{pageTitle=”“，canonicalUrl，metaDescription=''}）=>{
返回(
{pageTitle？`${pageTitle}`:“Prettyshop”}

在Layout.js中使用


function Layout({ pageTitle = "", children, betweenHeaderAndMain, showBrands, canonicalUrl, metaDescription=''}) {
    return (
        <MainLayout>
            <AppHead pageTitle={pageTitle} canonicalUrl={canonicalUrl || null} metaDescription={metaDescription} />
            <AddedToCartDialog />
            <LoginDialog />
            <LoginDialog showOnUnauthorized />
            <ErrorDialog />
            <FacebookLogin />
            <Header />
            {betweenHeaderAndMain}
            <main className="container-fluid page-content">{children}</main>
            <Footer showBrands={showBrands ? true : false} />
            <CookiesBar />
            <BackToTop />
        </MainLayout>
    );
}


函数布局（{pageTitle=”“，子函数，介于Header和Main之间，showBrands，canonicalUrl，metaDescription='''}）{
返回(
{在HeaderandMain之间}
{儿童}
);
}

在这里，我向它传递一个值：

<Layout pageTitle={pageTitle} metaDescription={get(product, 'data.attributes.description', null)? get(product, 'data.attributes.description', null).slice(0,160) : null} betweenHeaderAndMain={<Breadcrumbs className="container-fluid" />}>
            <div className="row product-head">
                <div className="col-md-6 offset-lg-1 col-lg-5">
                    <ImageGallery />
                </div>
        </Layout>

正如我所说的，一切正常，但如果我重新加载页面，我希望它在呈现页面时更新，而不是在重新加载页面时更新。如何在不重新加载页面的情况下更新元内容？

您可以使用状态存储元描述，然后通过设置状态或道具更新状态，它将在不重新加载的情况下重新呈现。

和h页面是如何被重新呈现的？每当你转到不同的产品时，它都会重新呈现页面，但元数据不会更新，但当我单击“刷新”时，它会更新页面。