Question

背景：

我正在尝试在我的嵌入式 Shopify 应用中创建一些链接。

我了解我无法使用简单的 <a> 标签，因为 Shopify 嵌入式应用程序呈现为 iframe。

我在本教程中取得了一些进展，但我卡住了：https://theunlikelydeveloper.com/shopify-app-bridge-react-router/

我想做什么：

我有 3 个页面（index.js、dashboard.js 和 support.js）。我希望允许用户从一个页面导航到另一个页面（使用链接和/或按钮）。

我的代码：

按照上面的教程，我已经走到这一步了：

// 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/structure/app-provider#section-using-linkcomponent

如何在 Embedded React App 中的页面之间路由？

0 个答案: