Shopify App Bridge と React Router を用いて Shopify アプリ上で画面遷移を行うサンプル

[camelmasa]

React を用いた SPA で画面遷移を行う場合、React Router を利用する事が多いかと思いますが、Shopify アプリ上で行う場合、Shopify App Bridge の History API を併せて利用する必要があります。

Shopify アプリを作成する毎にそれらを実装することもできますが、React Hook  にした  @huckleberry-inc/shopify-app-history npm を作成しました。

以下の様に利用できます。

import React from "react";
import {
  Button
} from "@shopify/polaris";
import createApp from '@shopify/app-bridge';

import { useShopifyHistory } from '@huckleberry-inc/shopify-app-history';

export const Component = () => {
  const app = createApp({
    apiKey: 'API key from Shopify Partner Dashboard',
    shopOrigin,
  });
  const to = useShopifyHistory(app);

  return (
    <Button onClick={ () => { to("/another_page") }} />
  );
};

[camelmasa]

公式ドキュメントの更新があり、AppProvier の linkComponent 属性を使えばできるとのこと。(試していません)

https://polaris.shopify.com/components/structure/app-provider#using-linkcomponent

[camelmasa]

linkComponent を設定し Polaris の Link component を利用すると、iframe 内で画面遷移を実現することが出来た (React Router が有効に機能した) が、App Bridge の History API は自動で呼ばれなかった。
ブラウザの URL も連動して遷移させたい場合は、linkComponent だけでは現状実現できない。

[webK]

Next.jsベースの場合ですが、こちらのリポジトリを参照しブラウザの URLと連動してのページ遷移ができました。

https://github.com/Shopify/product-reviews-sample-app

Next.js付属の"next/router"の利用と、このリポジトリ内のRoutePropagatorコンポーネントを参照しました。

具体的なコードを記載すべきかと思いますが、整理できていない部分もあるため後に時間を見て記載したいと思います。