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

Question

我正在尝试使用 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。这里缺少什么？

Answer 1

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

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

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

例如，如果您想记录路由器，每次更改时，您可以将路由器放在 useEffect 末尾的括号内，这将重新运行每次值时 useEffect 中的内容路由器（或你想放在那里的任何东西）的变化！

像这样，

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

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

Why am I not seeing route attributes on my simple Next.js route?

javascript

routes

reactjs

next.js