javascript - 如何在 Next.js 中使用查询字符串参数进行路由？

Question

我有一个类似的网址

bar?id=foo

如果我通过router.push('bar?id=foo')一切正常工作。

但是如果我直接进入浏览器中的路由，则查询字符串不会通过。

const BarComponent = ()=>{
    console.log(useRouter())
}

这输出

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

Answer 1

这是您在终端上从服务器获得的输出，并显示其默认值 ( {})。在客户端上，您应该看到 2 个控制台日志：第一个带有空查询对象（来自 SSR），第二个带有您的查询字符串（来自补液）。

useRouter()是一个 React Hook，所以它只会在客户端上运行/更新。

如果您想访问服务器端的查询字符串，则需要通过上下文对象中getServerSideProps的参数使用和访问它。query

export async function getServerSideProps({ query }) {
    console.log(query) // `{ id: 'foo' }`
    //...
}