FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

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

camelmasa
Shopify Partner
83 10 27

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

 

 

3件の返信3

camelmasa
Shopify Partner
83 10 27

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

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

camelmasa
Shopify Partner
83 10 27

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

webK
観光客
8 1 1

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

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

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

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