重新加载页面，而不是在shopify下一个js应用程序中路由页面

如何解决重新加载页面，而不是在shopify下一个js应用程序中路由页面

我遵循Shopify's guide，直到第四步结束为止，开发了Next JS应用程序，并且我已经设置了两个页面（嵌入式应用程序导航），即Home和Page1。现在，当我单击以打开两个页面时，该应用程序正在重新加载而不是路由...

您可以在此处看到闪烁的问题-https://youtu.be/45RvYgxC7C0

对此将提供任何帮助。

_app.js

import React from "react";

import App from "next/app";
import Head from "next/head";

import { AppProvider } from "@shopify/polaris";
import { Provider } from "@shopify/app-bridge-react";
import Cookies from "js-cookie";

import "@shopify/polaris/dist/styles.css";
import "../css/styles.css";

import lang from "@shopify/polaris/locales/en.json";

export default class MyApp extends App {
    render() {
        const { Component,pageProps } = this.props;
        const config = { apiKey: API_KEY,shopOrigin: Cookies.get("shopOrigin"),forceRedirect: true };

        return (
            <React.Fragment>
                <Head>
                    <title>My App</title>

                    <Meta charSet="utf-8" />
                    <Meta name="viewport" content="width=device-width,initial-scale=1" />

                    <link rel="icon" href="favicon.ico" />
                </Head>

                <Provider config={config}>
                    <AppProvider i18n={lang}>
                        <Component {...pageProps} />
                    </AppProvider>
                </Provider>
            </React.Fragment>
        );
    }
}

home.js

import React from "react";

import { Page,Layout,Card,FooterHelp,Link } from "@shopify/polaris";

export default function Home() {
    return (
        <Page title="Home">
            <Layout>
                <Layout.Section>
                    <Card title="Online store dashboard" sectioned>
                        <p>View a summary of your online store’s performance.</p>
                    </Card>
                </Layout.Section>

                <Layout.Section>
                    <FooterHelp>
                        Learn more about{" "}
                        <Link url="#" external>
                            our app
                        </Link>
                    </FooterHelp>
                </Layout.Section>
            </Layout>
        </Page>
    );
}

Page1.js

import React from "react";

import { Page,Link } from "@shopify/polaris";

export default function Page1() {
    return (
        <Page title="Page1">
            <Layout>
                <Layout.Section>
                    <Card title="Online store dashboard" sectioned>
                        <p>View a summary of your online store’s performance.</p>
                    </Card>
                </Layout.Section>

                <Layout.Section>
                    <FooterHelp>
                        Learn more about{" "}
                        <Link url="#" external>
                            our app
                        </Link>
                    </FooterHelp>
                </Layout.Section>
            </Layout>
        </Page>
    );
}

解决方法

使用Shopify的应用程序桥时，它的默认行为是导航到保存您应用程序的iframe中的新路由（从而完全重新加载应用程序），而React实现了客户端路由器。

Shopify并未为使用客户端路由提供100％的即插即用解决方案，但使用ClientRouter组件确实使其变得非常容易。

该页面上的示例适用于react-router，而不是Next.js的路由器，但相同的想法适用于next / router。

例如，一个简单的路由器组件可能类似于：

import {useEffect,useContext} from 'react';
import Router,{ useRouter } from "next/router";
import { Context as AppBridgeContext } from "@shopify/app-bridge-react";
import { Redirect } from "@shopify/app-bridge/actions";
import { RoutePropagator as ShopifyRoutePropagator } from "@shopify/react-shopify-app-route-propagator";

const RoutePropagator = () => {
  const router = useRouter(); 
  const { route } = router;
  const appBridge = React.useContext(AppBridgeContext);

  // Subscribe to appBridge changes - captures appBridge urls 
  // and sends them to Next.js router. Use useEffect hook to 
  // load once when component mounted
  useEffect(() => {
    appBridge.subscribe(Redirect.ActionType.APP,({ path }) => {
      Router.push(path);
    });
  },[]);

  return appBridge && route ? (
    <ShopifyRoutePropagator location={route} app={appBridge} />
  ) : null;
}

export default RoutePropagator;

创建该组件后，将其放入Shopify路由器内的_app.js文件中，例如：

<Provider config={config}>
  <AppProvider i18n={translations}>
    <RoutePropogator />
    <ApolloProvider client={client}>
      // child components
    </ApolloProvider>
  </AppProvider>
</Provider>

_app加载后，它现在将从appBridge订阅更改，并让appBridge知道向客户端发送信号，而不是重新加载整个iframe。如果您在应用程序中应用了任何路由，例如从一页到另一页，它现在还将更新浏览器的地址栏。

一切正常，每次请求新的nextjs页面时，您正在加载整个页面。为了使部分布局在页面加载之间保持不变，您需要将它们移至_app.js。看看官方的dynamic app layout example。

如果您想加载页面的一部分而不重新加载整个页面，则可以将query与shallow routing结合使用，例如example.com/settings和example.com/settings?section='profile'