Javascript Next.js对初始呈现的访问查询{amp:undefined}_Javascript_Reactjs_Next.js

Javascript Next.js对初始呈现的访问查询{amp:undefined}

javascript reactjs next.js

Javascript Next.js对初始呈现的访问查询{amp:undefined},javascript,reactjs,next.js,Javascript,Reactjs,Next.js,在Next.js 9.3中，我需要在初始渲染时访问query，并将查询结果传递到Next/head，以更改页面的标题和描述我的组件正在从useRouterhook获取查询。不幸的是，查询对象在初始渲染时是{amp:undefined}。在初始渲染之后，立即进行另一次渲染，该渲染具有所有必需的详细信息。我开始使用这个变通方法来检查路由是否准备好了，但这对next/head不起作用，因为这些值将是未定义的 import React from 'react'; import { useRouter

在Next.js 9.3中，我需要在初始渲染时访问query，并将查询结果传递到

Next/head

，以更改页面的标题和描述

我的组件正在从

useRouter

hook获取查询。不幸的是，查询对象在初始渲染时是

{amp:undefined}

。在初始渲染之后，立即进行另一次渲染，该渲染具有所有必需的详细信息。我开始使用这个变通方法来检查路由是否准备好了，但这对

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>
  );
};

从“React”导入React；
从“下一个/路由器”导入{useRouter}；
从“下一个/头”导入头；
功能isRouterReady（路由器）{
返回router.asPath！==router.route；
}
导出默认组件=（）=>{
const router=useRouter（）；
const{query}=路由器；
useffect（（）=>{
if（isRouterReady（路由器））{
//router.query在此填充名称
}
}，[查询]；
返回(
//查询只有amp键，但没有我的名字
{query.name}
);
};

是否有任何方法可以正确地将值从路由器查询传递到

next/head

的标题和元描述？

如何将store 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>
)

const[queryName，setQueryName]=useState（“”）；
useffect（（）=>{
if（isRouterReady（路由器））{
setQueryName（query.name）
}
}，[查询]）
返回(
{queryName}
)

状态为store 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>
)

const[queryName，setQueryName]=useState（“”）；
useffect（（）=>{
if（isRouterReady（路由器））{
setQueryName（query.name）
}
}，[查询]）
返回(
{queryName}
)

我在做静态生成，但我的文件应该做服务器端渲染。我添加了

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>
  );
};

从“React”导入React；
从“下一个/路由器”导入{useRouter}；
从“下一个/头”导入头；
导出常量getServerSideProps=async（上下文）=>{
返回{
道具：{query:context.query}，
};
};
导出默认组件=（{query}）=>{
返回(
{query.name}
);
};

我在做静态生成，但我的文件应该做服务器端渲染。我添加了

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>
  );
};

从“React”导入React；
从“下一个/路由器”导入{useRouter}；
从“下一个/头”导入头；
导出常量getServerSideProps=async（上下文）=>{
返回{
道具：{query:context.query}，
};
};
导出默认组件=（{query}）=>{
返回(
{query.name}
);
};

初始呈现将使用空queryName状态，在这种情况下，标题和元描述将为空。初始呈现将使用空queryName状态，在这种情况下，标题和元描述将为空