Компонент NextJS Head делает устаревшие реквизиты - PullRequest
Новая
       7

Компонент NextJS Head делает устаревшие реквизиты

0 голосов
/ 15 октября 2018

Моя цель состоит в том, чтобы попытаться поместить этот тег в заголовок приложения 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 возвращает первое значение, затемна стороне клиента он возвращает ноль, заставляя его вернуться к location.host + router.asPath.

Единственная проблема заключается в том, что router.asPath, по-видимому, на один шаг отстает от фактического значения при каждом обновлении.Например, скажем, если я нахожусь на 'http://bla.com/two', а моя предыдущая страница была' http://bla.com/one', тогда ссылка будет отображаться как <link rel="canonical" href="http://bla.com/one" />.

Я надеюсь, что объяснил самздесь достаточно хорошо, и я надеюсь, что у кого-нибудь есть какие-либо идеи, чтобы помочь:)

1 Ответ

0 голосов
/ 15 октября 2018

, если он в рендере, тогда просто используйте location.href вместо location.host + router.asPath, также если вы хотите узнать больше о том, почему router.asPath показывает предыдущий URL

...