⚛

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

2021/09/05に公開

React

Shopify

apps

tech

この記事について

この記事は、App Bridge/React component/ClientRouter の記事を和訳したものです。

Shopify アプリのご紹介

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

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

ClientRouter

デフォルトでは、App Bridge は、ナビゲーションアイテムがクリックされたことによる変更など、アプリの外部からの URL 変更を iframe の URL を更新することで適用します。アプリが React Router などのクライアントサイドルーティングを使用している場合は、不要なフルページリロードを避けるために、この動作をオーバーライドする必要があります。

ClientRouter は、App Bridge が iframe の URL を変更するのを防ぎ、ナビゲーションを処理するために、react-routerなどのクライアントサイドのルーターを提供することができます。

ClientRouter は、hook（useClientRouting）またはコンポーネント（<ClientRouter />）として使用できます。

ClientRouter は、更新されたパスの文字列を受け取るhistory.replaceメソッドを提供するあらゆるルーティングシステムで使用できます。

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

export interface History {
  replace(path: string): void;
}

export interface Props {
  history: History;
}

useClientRouting hook

App Bridge React からProviderとuseClientRoutinghook をインポートします。アプリケーションに必要なProviderは 1 つだけで、hook はProviderの内部から呼ばれなければなりません。

以下の例では、アプリがreact-router の withRouter enhancerを使用することを想定しています。

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

import MyRouter from '../MyRouter';

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

// MyRouter.tsx
import React from "react"
import { RouterProps, withRouter } from "react-router"
import { useClientRouting } from "@shopify/app-bridge-react"

function MyRouter(props: RouterProps) {
  const { history } = props

  useClientRouting(history)

  return null
}

export default withRouter(ClientRouter)

`<ClientRouter />`コンポーネント

Provider と<ClientRouter>コンポーネントをインポートします。アプリケーションに必要な Provider は 1 つだけで、コンポーネントは Provider の子である必要があります。

以下の例では、アプリが react-router の withRouter エンハンサーを使用していることを想定しています。

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

import MyRouter from '../MyRouter';

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

// MyRouter.tsx
import React from 'react';
import {RouterProps, withRouter} from 'react-router';
import {ClientRouter} from '@shopify/app-bridge-react';

function MyRouter(props: RouterProps) {.
const {history} = props;
return <ClientRouter history={history}. />;
};

export default withRouter(ClientRouter);

Shopify アプリのご紹介

Discussion

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

この記事について

Shopify アプリのご紹介

ClientRouter

useClientRouting hook

<ClientRouter />コンポーネント

Shopify アプリのご紹介

Discussion

`<ClientRouter />`コンポーネント