如何解决如何在 Next.js 中使用查询字符串参数进行路由?
我有一个类似的网址
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
}
解决方法
这是您在终端上从服务器获得的输出,并显示其默认值 ({}
)。在客户端上,您应该会看到 2 个控制台日志:第一个带有空查询对象(来自 SSR),第二个带有您的查询字符串。
useRouter()
是一个 React Hook,因此它只会在客户端上运行/更新。
如果您想在服务器端访问查询字符串,则需要使用 getServerSideProps
并通过上下文对象中的 query
参数访问它。
export async function getServerSideProps({ query }) {
console.log(query) // `{ id: 'foo' }`
//...
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。