Next. js доступ к запросу при начальном рендере и передача его заголовку next / head и мета-описанию - PullRequest
Новая
       19

Next. js доступ к запросу при начальном рендере и передача его заголовку next / head и мета-описанию

0 голосов
/ 02 мая 2020

В следующем. js 9.3 Мне нужно получить доступ к запросу при начальном рендеринге и передать результат запроса в next/head, чтобы изменить заголовок и описание страницы.

Мой компонент получает запрос от useRouter крючок. К сожалению, объект запроса { amp: undefined } при начальном рендере. Сразу после первоначального рендеринга происходит другой рендеринг, в котором есть все необходимые детали. Я начал использовать этот обходной путь с проверки, готов ли маршрут https://github.com/zeit/next.js/issues/8259#issuecomment -544912889 , но это не будет работать для next/head, так как значения будут неопределенными. 

import React from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';

function isRouterReady(router) {
  return router.asPath !== router.route;
}

export default Component = () => {
  const router = useRouter();
  const { query } = router;

  useEffect(() => {
    if (isRouterReady(router)) {
      // router.query is populated here with name
    }
  }, [query]);

  return (
      <Head>
        // query has only amp key, but not my name
        <title>{query.name}</title>
        <meta
          name="description"
          content={query.name}
        />
      </Head>
  );
};

Is Есть ли способ, как я могу правильно передать значения из запроса маршрутизатора в заголовок и мета-описание next/head?

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

Я занимался генерацией stati c, но мой файл должен выполнять рендеринг на стороне сервера. Я добавил getServerSideProps и передал запрос в компонент, где он правильно заполнен. 

import React from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';

export const getServerSideProps = async (context) => {
  return {
    props: { query: context.query },
  };
};

export default Component = ({ query }) => {    
  return (
      <Head>
        <title>{query.name}</title>
        <meta
          name="description"
          content={query.name}
        />
      </Head>
  );
};
0 голосов
/ 03 мая 2020

Как насчет магазина query.name в состоянии? 

const [queryName, setQueryName] = useState('');

useEffect(() => {
   if (isRouterReady(router)) {
      setQueryName(query.name)
   }
}, [query])

return (
   <Head>
      <title>{queryName}</title>
      <meta
         name="description"
         content={queryName}
      />
   </Head>
)
...