为什么我在简单的 Next.js 路由上看不到路由属性？答案

【问题标题】：Why am I not seeing route attributes on my simple Next.js route?为什么我在简单的 Next.js 路由上看不到路由属性？
【发布时间】：2021-08-26 08:42:57
【问题描述】：

我正在尝试使用 Dynamic Routes 在 Next.js 应用程序中创建一个简单的路由测试

作为测试的一部分，我使用以下代码创建了pages/test/[id].js：

import { useRouter } from 'next/router'

export default function Test() {
    const router = useRouter()
    console.log(router)
    return <p />
}

但是，当点击 URL test/foo?a=1 时，我在控制台中看到以下内容：

ServerRouter {
  route: '/test/[id]',
  pathname: '/test/[id]',
  query: {},
  asPath: '/test/[id]',
  basePath: '',
  events: undefined,
  isFallback: false,
  locale: undefined,
  isReady: false,
  locales: undefined,
  defaultLocale: undefined,
  domainLocales: undefined,
  isPreview: false,
  isLocaleDomain: false
}

问题是，我期待在这里看到一些东西，尤其是在query。这里缺少什么？

【问题讨论】：

可能与this有关

标签： javascript reactjs routes next.js

【解决方案1】：

在尝试控制台记录之前，您需要准备好路由器（在页面加载后）。

您可以将您的 console.log(router) 包装在 useEffect 中以防止这种行为，或者更好的是，等待它通过 router.isReady 准备好在您的 useEffect 中，然后再尝试记录它。

在尝试观察任何类型的数据（状态、查询...）时，我的建议是将您的 console.log 包装在 useEffect 中，而不是直接在顶层使用它。

例如，如果您想记录路由器，每次更改时，您可以将路由器放在 useEffect 末尾的括号内，这将在每次路由器的值（或任何您想要放在那里）改变！

这样，

useEffect(() => {
    console.log(router)
}
,[router])

【讨论】：