在第一次呈现中对查询进行未定义的接收

Question

我的动力路线出问题了。它看起来像这样

[lang]/abc

我试图从[lang]中获取查询值，但是当我使用useRouter/withRouter时，我在页面的2-3呈现过程中得到了查询(首先我得到了query.lang = undefined )。它有可能在1渲染或使用任何技术？

​

​

Answer 1

不可能在第一次呈现时获得查询值。

静态优化的页面在没有提供路由参数的情况下被水化。query是一个空对象({})。

水合后，Next.js将填充查询对象。

Next.js 10.0.5及以上

使用router.isReady内部的useEffect钩子检查参数是否准备就绪。示例见@doxylee的答案。

在Next.js 10.0.5之前

最初，动态路由router.asPath和router.route的呈现是相等的。一旦query对象可用，router.asPath就会反映它。

在更改useEffect钩子之后，您可以依赖于asPath钩子中的查询值。

const router = useRouter();

useEffect(() => {
  if (router.asPath !== router.route) {
    // router.query.lang is defined
  }
}, [router])

GitHub问题--向由"useRouter“返回的路由器添加”就绪“

Answer 2

我发现了一些东西：

isReady:布尔值-路由器字段是否已更新，客户端是否可以使用.只应在useEffect方法中使用，而不应用于服务器上的有条件呈现。https://nextjs.org/docs/api-reference/next/router#router-object

守则是这样的：

const router = useRouter();
useEffect(()=>{
    if(!router.isReady) return;

    // codes using router.query

}, [router.isReady]);

Answer 3

在NextJS 9+中，确保页面组件立即可用路由参数的一种方法是将它们从context arg传递到getServerSideProps()并作为支持传递给组件。

对于像[id].js这样的页面，

export function getServerSideProps(context) {
  return {
    props: {params: context.params}
  };
}

export default ({params}) => {
  const {id} = params;
  return <div>You opened page with {id}</div>;
};