Ale*_*xis 4 reactjs next.js shopify-app shopify-app-bridge next-router
我按照Shopify 的指南，直到第 4 步结束，开发了 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>
);
}
}
主页.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>
);
}
页面1.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>
);
}
小智 6
当使用 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.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}>
<RoutePropagator />
<ApolloProvider client={client}>
// child components
</ApolloProvider>
</AppProvider>
</Provider>
当 _app 加载时，它现在将订阅来自 appBridge 的更改，并让 appBridge 知道向客户端发送信号而不是重新加载整个 iframe。如果您在应用程序中应用任何路由，例如将一个页面应用到另一个页面，它现在也会更新浏览器的地址栏。
| 归档时间： |
|
| 查看次数： |
1554 次 |
| 最近记录： |