5

我按照Shopify 的指南，直到第 4 步结束，开发了一个 Next JS 应用程序，并且我设置了两个页面（嵌入式应用程序导航），主页和 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>
        );
    }
}

主页.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>
    );
}
4

2 回答 2

9

当使用 Shopify 的 app-bridge 时，它​​具有导航到保存您的应用程序的 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/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。如果您在应用程序中应用任何路由，例如一个页面到另一个页面，它现在也会更新浏览器的地址栏。

于 2020-08-19T06:24:36.793 回答
0

一切正常，每次请求新页面时都会加载整个nextjs页面。为了在页面加载之间保持部分布局，您需要将它们移动到_app.js. 看看官方动态应用布局示例。

如果您想加载页面的子部分而不重新加载整个页面，您可以将 aquery与浅路由结合使用，例如example.com/settings和example.com/settings?section='profile'

于 2020-08-18T11:26:56.397 回答