【问题标题】:Nextjs - Cannot get url prarams(query) on server side renderingNext Js - 无法在服务器端渲染中获取 url 参数(查询)
【发布时间】:2021-06-25 13:33:59
【问题描述】:

所以我试图从 url 获取 req 查询又名 GET 参数到服务器端渲染以进行基本验证和/登录以进行身份​​验证,例如 shopify 商店,但我无法真正验证它或在商店解析到渲染页面之前解析商店一个组件

我已经尝试过 geninitialprops 和 getserverside props,但它没有返回 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>
    )
  }
}

【问题讨论】:

  • 你能展示一下你在 getInitialProps 和 getServerSideProps 中的尝试吗?因为这就是它应该发生的地方 - 您可以从这些函数中的 context 获取请求和查询参数。
  • @I'mJoeToo 我特此更新了它,我基本上看了 nextjs 文档但是什么都没有

标签: javascript reactjs next.js


【解决方案1】:

要获取查询参数,您可能不希望将完整的上下文对象作为道具传递 - 太多不清楚和不必要的数据。

export async function getServerSideProps(context) {
  // The query params are set on `context.query`
  const { query } = context
  return {
    props: { query }
  }
}

/app?mydata=thisisworking&amp;hmac=21SA92 的示例 url 中,这将为您的类组件提供 this.props.mydatathis.props.hmac

【讨论】:

  • 在执行此操作并尝试登录控制台时它给出未定义,是我需要在 _app 中传递它还是?
猜你喜欢
  • 1970-01-01
  • 2021-11-20
  • 2021-10-30
  • 2021-03-30
  • 1970-01-01
  • 1970-01-01
  • 2019-04-07
  • 1970-01-01
  • 2017-01-22
相关资源
最近更新 更多