NextJS Head 组件渲染陈旧的道具答案

【问题标题】：NextJS Head component renders stale propsNextJS Head 组件渲染陈旧的道具
【发布时间】：2018-10-15 13:27:43
【问题描述】：

我的目标是尝试将此标签放在我的 NextJS 应用程序的头部：

<link rel="canonical" href="http://stackoverflow.com" />

我已经设置了一个自定义 _app.js，并在 getInitialProps 中使用 url 包返回我的 URL。这工作正常，我在页面加载时获得了 url。这是这个的代码：

static async getInitialProps({ Component, ctx }) {
    const initialProps = {};

    if (isServer) {
        const { req: { url: pageUrl, headers: { host } } } = ctx;

        initialProps.canonicalHref =
        createUrl({subdomain: host.split('.')[0], pathname: url.parse(pageUrl).pathname});
    }

    return  { ...initialProps }
}

在我的渲染函数中，我使用它来渲染链接标签：

        <Head>
          <link rel="canonical" href={canonicalHref || location.host + router.asPath} key="canonical" />
        </Head>

想法是 getInitialProps 返回第一个值，然后在客户端返回 null，使其回退到 location.host + router.asPath。

唯一的问题是 router.asPath 在更新时似乎比实际值落后一步。例如，如果我在“http://bla.com/two”上，而我的上一页是“http://bla.com/one”，那么链接将呈现为<link rel="canonical" href="http://bla.com/one" />。

我希望我在这里解释得足够好，我希望有人有任何想法可以提供帮助:)

【问题讨论】：

标签： javascript reactjs next.js server-side-rendering

【解决方案1】：

如果它在渲染中，那么只需使用location.href 而不是location.host + router.asPath 如果您想了解更多关于为什么router.asPath shows previous URL 的信息

【讨论】：

我很快就会试试这个，你会建议更新我的下一个版本吗？由于 ti 似乎以前的 URL 问题已在未来的 PR 中解决。由于对相当大的应用程序进行重大更改，我不愿意更新专业，但如果绝对必要，我会优先考虑。
我替换了 location.host + router.asPath，但在标签中呈现旧 HREF 时仍然遇到同样的问题，但是我发现了一些有趣的事情：当我从链接标签中删除 key="canonical" 时，我得到了呈现两个规范链接，一个带有旧网址，另一个带有新网址
@CarwynStephen 我想不出为什么会发生这样的事情的原因（那里没有循环，所以为什么要添加 key 属性）。至于更新 nextjs，我认为您的情况没有必要
我在这里添加key是因为可以从多个位置将元素添加到NextJS的Head组件中，而Head组件依赖于key来知道如何渲染独特的组件。如果您查看unique() 函数here，您可以看到它是如何使用密钥的
事实证明，将 Next 从 6.1.1-canary.0 更新到 7.0.2 确实解决了我的问题，现在修复一堆测试并手动测试所有内容，谢谢！