背景:
我正在尝试在嵌入式 Shopify 应用程序中创建一些链接。
我明白我不能使用简单的<a>
标签,因为 Shopify 嵌入式应用程序呈现为 iframe。
我在本教程中取得了一些进展,但我陷入了困境:https://theunlikelydeveloper.com/shopify-app-bridge-react-router/
我正在尝试做的事情:
我有 3 个页面(index.js、dashboard.js 和 support.js)。我想允许用户从一个页面导航到另一页面(使用链接和/或按钮)。
My Code:
通过遵循上面的教程,我已经做到了这一点:
// index.js
import { Page, Frame } from "@shopify/polaris";
const Index = () => {
return (
<Page>
<Frame>
{/* LINK TO DASHBOARD PAGE*/}
{/* LINK TO SUPPORT PAGE */}
</Frame>
</Page>
);
};
export default Index;
// routes.js
import React from "react";
import { Switch, Route, withRouter } from "react-router";
import { ClientRouter, RoutePropagator } from "@shopify/app-bridge-react";
function Routes(props) {
const { history, location } = props;
return (
<>
<ClientRouter history={history} />
<RoutePropagator location={location} />
<Switch>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/support">
<Support />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</>
);
}
export default withRouter(Routes);
// link.js
import React from "react";
import { Link as ReactRouterLink } from "react-router";
const IS_EXTERNAL_LINK_REGEX = /^(?:[a-z][a-z\d+.-]*:|\/\/)/;
function Link({ children, url = "", external, ref, ...rest }) {
if (external || IS_EXTERNAL_LINK_REGEX.test(url)) {
rest.target = "_blank";
rest.rel = "noopener noreferrer";
return (
<a href={url} {...rest}>
{children}
</a>
);
}
return (
<ReactRouterLink to={url} {...rest}>
{children}
</ReactRouterLink>
);
}
export default Link;
额外的:
我相信我应该在某处实现以下代码,但我不知道它如何适合使用链接或按钮在页面之间导航的图片。
<AppProvider linkComponent={Link}>
{/* App content including your <Route> components */}
</AppProvider>
- Shopify 文档链接:https://polaris.shopify.com/components/struct/app-provider#section-using-linkcomponent