提问人：Melonendk 提问时间：6/25/2021 最后编辑：Melonendk 更新时间：6/25/2021 访问量：4478
Nextjs - 无法在服务器端渲染上获取 url prarams（query）
Nextjs - Cannot get url prarams(query) on server side rendering
问：
所以我试图将 req 查询又名 GET 参数从 url 获取到服务器端渲染中进行基本验证和/登录以进行身份验证，例如 shopify shop，但我无法真正验证它或解析商店，然后再解析到渲染页面（又名组件）
我已经尝试了geninitialprops和getserverside道具，但它没有返回url中的值，例如/app？mydata=thisisworking&hmac=21SA92
我的代码
// _app.js
export default function InvenGroupApp({ Component, pageProps }) {
const { pathname } = useRouter();
const isApp = pathname.startsWith('/app');
return (
<React.Fragment>
<Head>
<title>InvenGroup</title>
<meta charSet="utf-8" />
</Head>
<PolarisProvider theme={theme}>
{isApp
? <AppHandler Component={Component} {...pageProps} />
: <Component {...pageProps} />
}
</PolarisProvider>
</React.Fragment>
);
}
应处理它的直接组件
// @components/AppHandler.js
import React, { Component } from 'react';
import AppLayout from "@components/AppLayout";
import shopSession from '@lib/shop';
export async function getServerSideProps(context) {
return {
props: { context }
}
}
export default class AppHandler extends Component {
render () {
const { shop } = shopSession();
const AppPage = this.props.Component;
console.log(this.props);
if (shop) {
return (
<AppLayout Component={AppPage}/>
)
}
return (
<AppPage>
<div>Loading</div>
</AppPage>
)
}
}
答：
0赞
I'm Joe Too
6/25/2021
#1
要获取查询参数，您可能不想将完整的上下文对象作为 props 传递 - 太多不清晰和不必要的数据。
export async function getServerSideProps(context) {
// The query params are set on `context.query`
const { query } = context
return {
props: { query }
}
}
在您的示例 url 中，这将为您的类组件和 ./app?mydata=thisisworking&hmac=21SA92this.props.mydatathis.props.hmac
评论
0赞
Melonendk
6/25/2021
执行此操作并尝试在控制台中登录时，它给出了未定义，可能是我需要将其传递_app还是？
评论
context