NextJS Head 组件呈现陈旧的道具

Question

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

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

我已经设置了自定义 _app.js，并且在 getInitialProps 中我 return 我的 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 }
}

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

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

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

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

我希望我已经在这里充分解释了自己，我希望有人有任何想法可以提供帮助:)

Answer 1

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

NextJS Head 组件呈现陈旧的道具

NextJS Head component renders stale props

javascript

reactjs

next.js

server-side-rendering