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

Highlighted

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") }} />
  );
};

 

 

1 件の「いいね!」
Highlighted

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

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

1 件の「いいね!」
Highlighted

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

1 件の「いいね!」