我可以使用next.js在app.jsx上检查查询吗？
我可以使用next.js在app.jsx上检查查询吗？
提问于 2021-05-10 13:30:10
我的环境: React.js + Next.js
我需要app.jsx上的查询参数
当我写下
console.log(1);
console.log(router); (= useRouter import from next/router)
console.log(2);
console.log(Router); (= Router import from next/router)Chrome控制台可以很好地打印查询，但在终端上- query是空的
1
ServerRouter {
route: '/',
pathname: '/',
query: {},
asPath: '/',
basePath: '',
events: undefined,
isFallback: false,
locale: undefined,
isReady: false,
locales: undefined,
defaultLocale: undefined,
domainLocales: undefined
}
2
{
router: null,
readyCallbacks: [],
ready: [Function: ready],
push: [Function (anonymous)],
replace: [Function (anonymous)],
reload: [Function (anonymous)],
back: [Function (anonymous)],
prefetch: [Function (anonymous)],
beforePopState: [Function (anonymous)]
}有没有办法在app.jsx上查询？
非常感谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-05-10 14:24:25
您可以使用useRouter来获取查询参数。仅当您向Next.js服务器发出请求时，查询参数才可用。
如果您使用的是Next.js服务器，并且希望基于查询参数构建页面，则可以在服务器端执行此操作。但是如果你使用的是静态文件，那么在第一次渲染时，查询总是为空的，这是因为Next.js正在进行页面的预渲染。
Stack Overflow用户
发布于 2021-05-11 05:26:13
您可以从自定义_app的上下文对象访问router实例，该对象包含客户端和服务器上的查询参数。
// pages/_app.jsx
const App = ({ Component, pageProps, router }) => {
console.log(router.query); // Will log query params on client & server
return <Component {...pageProps} />;
};
export default App;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67465193
复制相关文章
相似问题
腾讯云开发者
