reactjs - 如何在 Embedded React App 中的页面之间路由?
问题描述
背景:
我正在尝试在我的嵌入式 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>
解决方案
在构建嵌入式应用程序时,您可以使用本答案中提到的应用程序桥实用程序进行客户端导航
您只需要编辑_app
文件并考虑从您的组件进行客户端导航(不能使用普通链接)
import {useEffect} from 'react';
import Router, { useRouter } from "next/router";
import { RoutePropagator as ShopifyRoutePropagator } from "@shopify/app-bridge-react";
function RoutePropagator () {
const router = useRouter();
const { route } = router;
const app= useAppBridge();
useEffect(() => {
app.subscribe(Redirect.Action.APP, ({ path }) => {
Router.push(path);
});
}, []);
return app && route ? (
<ShopifyRoutePropagator location={route} />
) : null;
}
_app
然后在你的文件中使用这个组件
_app.tsx
class MyApp extends App {
render() {
const { Component, pageProps, host } = this.props as any;
return (
<PolarisProvider i18n={translations}>
<ShopifyBridgeProvider
config={{
apiKey: API_KEY,
host,
forceRedirect: true,
}}
>
<RoutePropagator />
<ApolloClientProvider Component={Component} {...pageProps} />
</ShopifyBridgeProvider>
</PolarisProvider>
);
}
}
现在您已经订阅了_app
文件中的路由事件,我们只需要在您的页面中进行客户端导航
import {useAppBridge} from '@shopify/app-bridge-react';
import { Redirect } from '@shopify/app-bridge/actions';
function IndexPage(props) {
const app = useAppBridge();
return (
<>
<div>{'you are in main page'}</div>
<div onClick={() => {
app.dispatch(Redirect.toApp({
path: '/dashboard'
}));
}}>
{'to dashboard'}
</div>
</>
);
}
对于返回主页/
路由,我发现oauth
如果没有提供商店名称,它会再次触发,因此我们将为此使用商店查询参数
<div onClick={() => {
app.dispatch(Redirect.toApp({
path: '/?shop=<shop-name>.myshopify.com'
}));
}}>
{'to main'}
</div>
推荐阅读
- r - 合并R中的两个数据框后如何打印新列
- keyboard - 输入root密码时键盘不工作(Linux)
- java - Spring Boot - Bean Validation,带有泛型的约束注解
- swift - 如何快速将背景图像添加到 canvasView(由 PencilKit 制作)中?
- sorting - 如何使用“closestPair”操作对两组 A、B 进行排序
- correlation - 与 R 中的协变量的相关性
- php - JSON 返回空数据(Flutter)
- python - 是否可以使用 NLP 从非结构化文本块中提取特定({Architect, Building})信息?
- javascript - 滚动时禁用链接
- php - 如何将 Lumen API 投入生产?什么主机?