让客户端路由工作与Shopify应用桥反应

Question

我正在使用一个嵌入式React Shopify应用程序(使用create-rect应用程序引导(。我正在尝试遵循应用桥react中ClientRouter组件的文档：https://shopify.dev/tools/app-bridge/react-components/client-router但我对Shopify生态系统还很陌生，似乎无法使用嵌入的路由与Shopify中设置的导航链接进行通信。文档中的示例没有显示路由在React应用程序中的外观。

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react'
import { AppProvider } from '@shopify/polaris'
import translations from '@shopify/polaris/locales/en.json'
import '@shopify/polaris/styles.css'
import Router from './Router'
import './index.css'
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<AppBridgeProvider
config={{
apiKey: API_KEY,
shopOrigin: SHOP_ORIGIN,
}}
>
<AppProvider i18n={translations}>
<Router />
</AppProvider>
</AppBridgeProvider>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
)

// Router.js
import { withRouter } from 'react-router-dom'
import { useClientRouting } from '@shopify/app-bridge-react'
const Router = (props) => {
const { history } = props
console.log(history.location) // always "/"
useClientRouting(history)
return null
}
export default withRouter(Router)

我试着在Router.js中返回一个带有路由的Switch，但历史位置总是"/"(尽管我可以看到iframe中的URL发生了变化(。如有任何帮助，我们将不胜感激。

Answer 1

我也在尝试实现客户端路由。我做到了，但不幸的是，我需要在index.js中设置一个状态，这是不推荐的。基本上，我在Router.js中获得了历史记录，我在每条路线中都通过了它。所以我们可以在每个组件中获取历史，并且可以使用所有的历史方法。

索引.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { AppProvider } from "@shopify/polaris";
import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react';
import Dashboard from "./index";
import enTranslations from "@shopify/polaris/locales/en.json";
import MyRouter from '../utils/MyRouter';
import JavascriptTimeAgo from 'javascript-time-ago';
import en from 'javascript-time-ago/locale/en';
import { withRouter } from 'react-router-dom'
import { useClientRouting } from '@shopify/app-bridge-react'
JavascriptTimeAgo.addLocale(en);

const App = (props) => {
const { apiKey, shopOrigin, domain, debug } = props;
const [history, setHistory] = useState({})
useClientRouting(history)
const config = { apiKey, shopOrigin };
const getHistory = (historyData) => {
setHistory(historyData)
}
return (
<React.Fragment>
<BrowserRouter>
<AppBridgeProvider config={config}>
<AppProvider i18n={enTranslations}>
<MyRouter getHistory={(history) => getHistory(history)} />
<Switch>
<Route exact path="/">
<Dashboard domain={domain} shopOrigin={shopOrigin} history={history} />
</Route>
</Switch>
</AppProvider>
</AppBridgeProvider>
</BrowserRouter>
</React.Fragment>
);
};
export default withRouter(App);

和Router.js

import { withRouter } from 'react-router-dom'
import { useClientRouting } from '@shopify/app-bridge-react'
const Router = (props) => {
const { history } = props
console.log(history) // we are getting history here.
useClientRouting(history)
props.getHistory(history)
return null
}
export default withRouter(Router)