⚛

【Shopify.dev和訳】App Bridge/React components/RouterPropagator

2021/09/05に公開

React

Shopify

apps

tech

この記事について

この記事は、Apps/Developer tools/React Components/RoutePropagator の記事を和訳したものです。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

RoutePropagator

ユーザーが埋め込みアプリ内を移動すると、埋め込みアプリの iframe の URL が変わります。ユーザーがページをリロードすると、ナビゲーションは親ページの URL に反映されません。

RoutePropagator は Shopify の埋め込みアプリの URL を親ページと同期させることができます。

RoutePropagator はフック (useRoutePropagation) またはコンポーネント (<RoutePropagator />) として使用できます。このパッケージはどのようなルーティングソリューションでも使用することができます。

このライブラリのフック版とコンポーネント版の両方は、Providerコンポーネント内にマウントされ、同じlocationパラメータを取る必要があります。

import { ClientApplication } from "@shopify/app-bridge"

export type LocationOrHref = string | { search: string, hash: string, pathname: string }

export interface Props {
  location: LocationOrHref;
}

また、App Bridge History API を使用して、親 URL を手動で同期させることもできます。

useRoutePropagation

Providerと useRoutePropagation フックをインポートします。アプリケーションに必要なProviderは 1 つだけです。以下の例では、アプリが react-router の withRouter エンハンサーを使用することを想定しています。

App.tsx

import React from 'react';
import {BrowserRouter} from 'react-router';
import {Provider as AppBridgeProvider} from '@shopify/app-bridge-react';

import Routes from '../Routes';

export default function MyApp() {
  return (
    <BrowserRouter>
      <AppBridgeProvider
        config={{
          apiKey: 'API key from Shopify Partner Dashboard',
          host: host,
        }}
      >
        <Routes />
      </AppBridgeProvider>
    </BrowserRouter>
  );
})

Routes.tsx

import React from 'react';
import {Switch, Route, RouteComponentProps, withRouter} from 'react-router'
import {useRoutePropagation} from '@shopify/app-bridge-react';

function Routes(props: RouteComponentProps) {
  const {location} = props;

  useRoutePropagation(location);

  return (
    <>
      <Switch>
        <Route exact path="/">
        { /* other routes */ }
      </Switch>
    </>
  );
}

export default withRouter(Routes);

<RoutePropagator />

Provider と<RoutePropagator>コンポーネントをインポートします。アプリケーションに必要なProviderは 1 つだけです。次の例では、アプリケーションが使用することを想定しています。

withRouter enhancer from react-router

App.tsx

import React from 'react';
import {BrowserRouter, Switch} from 'react-router';
import {Provider as AppBridgeProvider} from '@shopify/app-bridge-react';

import RoutePropagator from '../RoutePropagator';

export default function MyApp() {
  return (
    <BrowserRouter>
      <AppBridgeProvider
        config={{
          apiKey: 'API key from Shopify Partner Dashboard',
          host: host,
        }}
      >
        <RoutePropagator />
        <Switch>
          <Route exact path="/">
          { /* other routes */ }
        </Switch>
      </AppBridgeProvider>
    </BrowserRouter>
  );
})

RoutePropagator.tsx

import React from "react"
import { RouteComponentProps, withRouter } from "react-router"
import { RoutePropagator as AppBridgeRoutePropagator } from "@shopify/app-bridge-react"

function RoutePropagator(props: RouteComponentProps) {
  const { location } = props
  return <AppBridgeRoutePropagator location={location} />
}

export default withRouter(RoutePropagator)

Shopify アプリのご紹介

Discussion

ログインするとコメントできます