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

Question

我遵循 Shopify's guide，直到第 4 步结束，开发了一个 Next JS 应用程序，我已经设置了两个页面（嵌入式应用程序导航），主页和第 1 页。现在，当我点击打开两个页面时，应用程序正在重新加载而不是路由...

您可以在这里看到闪烁的问题 - 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, Layout, Card, FooterHelp, 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>
    );
}

Answer 1

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

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

Answer 2

使用 Shopify 的 app-bridge 时，它的默认行为是导航到包含您的应用程序的 iframe 中的新路由（从而完全重新加载应用程序），而 React 实现了 client-side路由器。

Shopify 不提供使用 client-side 路由的 100% plug-and-play 解决方案，但他们的 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/app-bridge-react";

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.Action.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}>
    <RoutePropagator />
    <ApolloProvider client={client}>
      // child components
    </ApolloProvider>
  </AppProvider>
</Provider>

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

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

Pages are reloaded instead of routed in shopify next js app

reactjs

next.js

shopify-app

shopify-app-bridge

next-router