使用 Shopify app-bridge-react 获取客户端路由答案

【问题标题】：Getting client side routing working with Shopify app-bridge-react使用 Shopify app-bridge-react 获取客户端路由
【发布时间】：2020-04-30 16:17:22
【问题描述】：

我正在使用嵌入式 React Shopify 应用程序（使用 create-react-app 引导）。我正在尝试遵循 app-bridge-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 发生变化）。任何帮助将不胜感激。

【问题讨论】：

标签： reactjs react-router shopify polaris

【解决方案1】：

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

Index.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)

【讨论】：