Shopifyアプリ内にリンクメニューを配置する

アプリのトップページ（web/frontend/pages/index.jsx）に、メニューを配置しようと思いましたが、アプリ画面はiframeによって表示が行われているため、そのままURLでリンクを貼ってもうまくいきません。

「AppProvider linkComponent」を使うことで、できそうな雰囲気はあるのですが、イマイチ理解できず・・・

https://stackoverflow-com.translate.goog/questions/66996055/how-do-i-route-between-pages-in-embedded-react-app?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc

そこで、強引な方法ではありますが、全フレームを解除＆ジャンプするプロパティ「top.location.href」を使用しました。

js

import React from 'react';
import {BrowserRouter, Link as ReactRouterLink} from 'react-router-dom';
import {
  Card,
  Page,
  Layout,
  Link,
} from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";

// ストアのホームURLを現在のURLから取得
const shopUrl = getParam('shop');
function getParam(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}
console.log(getParam('shop'));

export default function HomePage() {
  return (
    <Page>
      <TitleBar title="Shopifyアプリ" primaryAction={null} />
      <Layout>

        <Layout.Section oneHalf>
          <Card sectioned data-primary-link><Link onClick={() => top.location.href = 'https://' + getParam('shop') + '/admin/apps/アプリURL'}>ツール１/Link></Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール２</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール３</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール４</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール５</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール６</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール７</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール８</Card>
        </Layout.Section>

      </Layout>
    </Page>
  );
}