useRouter/withRouter 在第一次渲染时接收未定义的查询 [英] useRouter/withRouter receive undefined on query in first render

问题描述

我的动态路由有问题.看起来像这样

I got a problem with my dynamic route. It look like this

[lang]/abc

我正在尝试从 [lang] 获取查询值，但是当我使用 useRouter/withRouter 时，我在页面的 2-3 渲染期间得到了查询(首先我得到了query.lang = 未定义).是否可以进行 1 次渲染或使用任何技术?

I am trying to get query value from [lang] but when I using useRouter/withRouter i got query during 2-3 render of page ( on first i got query.lang = undefined ). its possible to get in 1 render or use any technique ?

推荐答案

在第一次渲染时无法获得查询值.

It isn't possible to get a query value at the first render.

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

Statically optimized pages are hydrated without provided route parameters. E.g. query is an empty object ({}).

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

After hydration, Next.js will fill the query object.

在 useEffect 钩子中使用 router.isReady 来检查参数是否准备就绪.有关示例，请参阅 @dy063 的回答.

Use router.isReady inside useEffect hook to check if params are ready. See the answer by @dy063 for the example.

首先渲染动态路由 router.asPath 和 router.route 是相等的.一旦 query 对象可用，router.asPath 就会反映它.

At first render of a dynamic route router.asPath and router.route are equal. Once query object is available, router.asPath reflects it.

您可以在 asPath 更改后依赖 useEffect 钩子中的查询值.

You can rely on the query value within a useEffect hook after asPath has been changed.

const router = useRouter();

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

GitHub 问题 - 添加准备好的"到由useRouter"返回的路由器

这篇关于useRouter/withRouter 在第一次渲染时接收未定义的查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！