Question

在Next.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>
  );
};

有什么方法可以正确地将路由器查询中的值传递给next/head的标题和元描述？

Answer 1

状态存储状态如何？

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

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

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

Answer 2

我正在进行静态生成，但是我的文件应该在服务器端进行渲染。我添加了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>
  );
};

初始渲染{amp：undefined}

2 个答案: