Javascript 从Shopify react应用程序中获取shopOrigin的最佳方式是什么？

概述：

// _app.js

import store from "store-js";
// other imports

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    store.set("shopUrl", shopOrigin);
    return (
      <AppProvider i18n={translations}>
        <Provider
          config={{
            apiKey: API_KEY,
            shopOrigin: shopOrigin,
            forceRedirect: true,
          }}
        >
          <ClientRouter />
          <MyProvider Component={Component} {...pageProps} />
        </Provider>
      </AppProvider>
    );
  }
}

我正在使用Shopify的CLI生成一个嵌入式React应用程序。我希望能够从应用程序中的其他页面获得shopOrigin（见下面的代码）

问题：

// _app.js

import store from "store-js";
// other imports

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    store.set("shopUrl", shopOrigin);
    return (
      <AppProvider i18n={translations}>
        <Provider
          config={{
            apiKey: API_KEY,
            shopOrigin: shopOrigin,
            forceRedirect: true,
          }}
        >
          <ClientRouter />
          <MyProvider Component={Component} {...pageProps} />
        </Provider>
      </AppProvider>
    );
  }
}

我已尝试使用存储shopOrigin。这在一开始是可行的，但当我导航到应用程序中的任何其他页面时，它似乎很清晰

注意：

// _app.js

import store from "store-js";
// other imports

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    store.set("shopUrl", shopOrigin);
    return (
      <AppProvider i18n={translations}>
        <Provider
          config={{
            apiKey: API_KEY,
            shopOrigin: shopOrigin,
            forceRedirect: true,
          }}
        >
          <ClientRouter />
          <MyProvider Component={Component} {...pageProps} />
        </Provider>
      </AppProvider>
    );
  }
}

由于它是在

\u app.js

中正确设置的，我觉得我应该能够将shopOrigin进一步下游（即在我的索引页面或任何其他页面中），而不必在存储中设置它

因此，我完全愿意以不同的方式获取shopOrigin，而不必通过store js或任何其他存储机制进行存储

尽管如此，这是我当前的代码

代码：

// _app.js

import store from "store-js";
// other imports

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    store.set("shopUrl", shopOrigin);
    return (
      <AppProvider i18n={translations}>
        <Provider
          config={{
            apiKey: API_KEY,
            shopOrigin: shopOrigin,
            forceRedirect: true,
          }}
        >
          <ClientRouter />
          <MyProvider Component={Component} {...pageProps} />
        </Provider>
      </AppProvider>
    );
  }
}