# Stripe Apps の Link コンポーネント

あるページから別のページへユーザーを移動させる場合、ボタンよりも繊細な操作が必要な場合はリンクを使います。

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/link?app-sdk-version=8.

`Link` コンポーネントをアプリに追加するには、以下のようにします。

```js
import {Link} from '@stripe/ui-extension-sdk/ui';
```

Stripe 製品では、1 次と 2 次の 2 つのタイプのリンクを使用できます。

### Link プロパティ

| プロパティー      | タイプ                                                                                                      |
| ----------- | -------------------------------------------------------------------------------------------------------- |
| `children`  | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                                               |
| `css`       | (オプション)
  `CSS | undefined`

  関連タイプ: [CSS](https://docs.stripe.com/stripe-apps/components/link.md#css)。 |
| `disabled`  | (オプション)
  `boolean | undefined`

  アクションが無効化されているかどうか。                                                   |
| `external`  | (オプション)
  `boolean | undefined`

  外部リソースにリンクするかどうか。                                                     |
| `href`      | (オプション)
  `string | undefined`

  ネイティブの `href` 属性。                                                      |
| `onPress`   | (オプション)
  `((event: PressEvent) => void) | undefined`

  ターゲット上で押したときに呼び出されるハンドラ。                        |
| `rel`       | (オプション)
  `string | undefined`

  ネイティブの `rel` 属性。                                                       |
| `tabIndex`  | (オプション)
  `number | undefined`

  Tab キーのデフォルト動作を上書きします。`-1` と `0` 以外の値は使用しないでください。                      |
| `target`    | (オプション)
  `("_self" | "_blank" | "_top" | "_parent") | undefined`

  閲覧コンテキストの名前として、リンクされた URL を表示する場所。  |
| `type`      | (オプション)
  `("primary" | "secondary") | undefined`

  `Link` のタイプ。                                        |
| `className` | (オプション)(非推奨)
  `string | undefined`                                                                      |

### CSS

| プロパティー   | タイプ                                                                                                                                                                                                                                                                                                                                                                                               |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `alignX` | (オプション)
  `("start" | "center" | "end" | "stretch") | undefined`

  水平方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。                                                                                                                                                                                                                         |
| `width`  | (オプション)
  `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined`

  コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 |

## 1 次リンク

1 次スタイルは、リンクのデフォルトです。外部リソースやアプリケーション内の他のページにリンクする際に常に使用されます。

## 2 次リンク

2 次リンクは、以下の状況で使用します。

- リンクが近くにある 1 次ボタンまたは 1 次リンクと衝突する場合
- それぞれがリンクである多数のアイテムが 1 ページに表示される場合。1 ページに多数の 1 次リンクが表示されると混乱しやすくなります。このような状況では 2 次リンクを使用してください。
- Customer、Payment、Product などのオブジェクトをリンクする場合。UI でこれらのオブジェクトが参照されるすべての場所でリンクを設定する必要があります。1 ページで多数のオブジェクトがリンクされる可能性があるため、2 次スタイルを使用して視覚的混乱を招かないようにします。

## 無効化されたリンク

## 新しいタブでリンクを開く

## 指定できる href 値

`href` 属性は、相対 URL と HTTP または HTTPS URL をサポートしています。また、ダッシュボード内を移動するために[経路ディスクリプター](https://docs.stripe.com/stripe-apps/route-descriptors.md)を渡すこともできます。その他の値は実行時にサニタイズされます。


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/link?app-sdk-version=9.

`Link` コンポーネントをアプリに追加するには、以下のようにします。

```js
import {Link} from '@stripe/ui-extension-sdk/ui';
```

Stripe 製品では、1 次と 2 次の 2 つのタイプのリンクを使用できます。

### Link プロパティ

| プロパティー     | タイプ                                                                                                                                                                                                                                                        |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                                                                                                                                                                                                 |
| `css`      | (オプション)
  `CSS | undefined`

  関連タイプ: [CSS](https://docs.stripe.com/stripe-apps/components/link.md#css)。                                                                                                                                                   |
| `disabled` | (オプション)
  `boolean | undefined`

  アクションが無効化されているかどうか。                                                                                                                                                                                                     |
| `external` | (オプション)
  `boolean | undefined`

  外部リソースにリンクするかどうか。                                                                                                                                                                                                       |
| `href`     | (オプション)
  `(string | RouteDescriptor) | undefined`

  移動先のネイティブの `href` 属性または [ダッシュボードルート](https://docs.stripe.com/stripe-apps/route-descriptors.md)。

  関連タイプ: [RouteDescriptor](https://docs.stripe.com/stripe-apps/components/link.md#routedescriptor)。 |
| `onPress`  | (オプション)
  `((event: PressEvent) => void) | undefined`

  ターゲット上で押したときに呼び出されるハンドラ。                                                                                                                                                                          |
| `rel`      | (オプション)
  `string | undefined`

  ネイティブの `rel` 属性。                                                                                                                                                                                                         |
| `tabIndex` | (オプション)
  `number | undefined`

  Tab キーのデフォルト動作を上書きします。`-1` と `0` 以外の値は使用しないでください。                                                                                                                                                                        |
| `target`   | (オプション)
  `("_self" | "_blank" | "_top" | "_parent") | undefined`

  閲覧コンテキストの名前として、リンクされた URL を表示する場所。                                                                                                                                                    |
| `type`     | (オプション)
  `("primary" | "secondary") | undefined`

  `Link` のタイプ。                                                                                                                                                                                          |

### CSS

| プロパティー   | タイプ                                                                                                                                                                                                                                                                                                                                                                                               |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `alignX` | (オプション)
  `("start" | "center" | "end" | "stretch") | undefined`

  水平方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。                                                                                                                                                                                                                         |
| `width`  | (オプション)
  `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined`

  コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 |

### RouteDescriptor

これはユニオン型です。[BalanceOverviewRoute](https://docs.stripe.com/stripe-apps/components/link.md#balanceoverviewroute)、[BillingRoute](https://docs.stripe.com/stripe-apps/components/link.md#billingroute)、[CustomersRoute](https://docs.stripe.com/stripe-apps/components/link.md#customersroute)、[CustomerDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#customerdetailsroute)、[DashboardRoute](https://docs.stripe.com/stripe-apps/components/link.md#dashboardroute)、[FullPageRoute](https://docs.stripe.com/stripe-apps/components/link.md#fullpageroute)、[InvoiceDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#invoicedetailsroute)、[InvoicesRoute](https://docs.stripe.com/stripe-apps/components/link.md#invoicesroute)、[OnboardingRoute](https://docs.stripe.com/stripe-apps/components/link.md#onboardingroute)、[PaymentDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#paymentdetailsroute)、[PaymentReviewDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#paymentreviewdetailsroute)、[PaymentsRoute](https://docs.stripe.com/stripe-apps/components/link.md#paymentsroute)、[ProductDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#productdetailsroute)、[ProductsRoute](https://docs.stripe.com/stripe-apps/components/link.md#productsroute)、[ReportsHubRoute](https://docs.stripe.com/stripe-apps/components/link.md#reportshubroute)、[RevenueRecognitionRoute](https://docs.stripe.com/stripe-apps/components/link.md#revenuerecognitionroute)、[ShippingRateDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#shippingratedetailsroute)、[ShippingRatesRoute](https://docs.stripe.com/stripe-apps/components/link.md#shippingratesroute)、[SubscriptionDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#subscriptiondetailsroute)、[SubscriptionsRoute](https://docs.stripe.com/stripe-apps/components/link.md#subscriptionsroute)、[TaxReportingLocationsRoute](https://docs.stripe.com/stripe-apps/components/link.md#taxreportinglocationsroute)、[TaxReportingRoute](https://docs.stripe.com/stripe-apps/components/link.md#taxreportingroute) のいずれかになります。

### BalanceOverviewRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"balanceOverview"`                                                                     |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### BillingRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"billing"`                                                                             |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### CustomersRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"customers"`                                                                           |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### CustomerDetailsRoute

| プロパティー      | タイプ                                                                                                                     |
| ----------- | ----------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"customerDetails"`                                                                                              |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/link.md#customerdetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                          |

### CustomerDetailsRoute Params

| プロパティー       | タイプ                        |
| ------------ | -------------------------- |
| `customerId` | (必須)
  `string`

  顧客の ID。 |

### DashboardRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"dashboard"`                                                                           |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### FullPageRoute

| プロパティー      | タイプ                                                                                                                             |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"fullPage"`                                                                                                             |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                                  |
| `params`    | (オプション)
  `Params | undefined`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/link.md#fullpageroute-params)。 |

### FullPageRoute Params

| プロパティー  | タイプ                                                |
| ------- | -------------------------------------------------- |
| `appId` | (オプション)
  `string | undefined`

  アプリの ID。         |
| `tabId` | (オプション)
  `string | undefined`

  選択する必要があるタブの ID。 |

### InvoiceDetailsRoute

| プロパティー      | タイプ                                                                                                                    |
| ----------- | ---------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"invoiceDetails"`                                                                                              |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/link.md#invoicedetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                         |

### InvoiceDetailsRoute Params

| プロパティー      | タイプ                         |
| ----------- | --------------------------- |
| `invoiceId` | (必須)
  `string`

  請求書の ID。 |

### InvoicesRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"invoices"`                                                                            |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### OnboardingRoute

| プロパティー      | タイプ                                                                                                                               |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"onboarding"`                                                                                                             |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                                    |
| `params`    | (オプション)
  `Params | undefined`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/link.md#onboardingroute-params)。 |

### OnboardingRoute Params

| プロパティー  | タイプ                                        |
| ------- | ------------------------------------------ |
| `appId` | (オプション)
  `string | undefined`

  アプリの ID。 |

### PaymentDetailsRoute

| プロパティー      | タイプ                                                                                                                    |
| ----------- | ---------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"paymentDetails"`                                                                                              |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/link.md#paymentdetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                         |

### PaymentDetailsRoute Params

| プロパティー      | タイプ                        |
| ----------- | -------------------------- |
| `paymentId` | (必須)
  `string`

  決済の ID。 |

### PaymentReviewDetailsRoute

| プロパティー      | タイプ                                                                                                                          |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"paymentReviewDetails"`                                                                                              |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/link.md#paymentreviewdetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                               |

### PaymentReviewDetailsRoute Params

| プロパティー      | タイプ                        |
| ----------- | -------------------------- |
| `paymentId` | (必須)
  `string`

  決済の ID。 |

### PaymentsRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"payments"`                                                                            |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### ProductDetailsRoute

| プロパティー      | タイプ                                                                                                                    |
| ----------- | ---------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"productDetails"`                                                                                              |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/link.md#productdetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                         |

### ProductDetailsRoute Params

| プロパティー      | タイプ                        |
| ----------- | -------------------------- |
| `productId` | (必須)
  `string`

  商品の ID。 |

### ProductsRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"products"`                                                                            |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### ReportsHubRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"reportsHub"`                                                                          |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### RevenueRecognitionRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"revenueRecognition"`                                                                  |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### ShippingRateDetailsRoute

| プロパティー      | タイプ                                                                                                                         |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"shippingRateDetails"`                                                                                              |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/link.md#shippingratedetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                              |

### ShippingRateDetailsRoute Params

| プロパティー           | タイプ                          |
| ---------------- | ---------------------------- |
| `shippingRateId` | (必須)
  `string`

  配送料金の ID。 |

### ShippingRatesRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"shippingRates"`                                                                       |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### SubscriptionDetailsRoute

| プロパティー      | タイプ                                                                                                                         |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"subscriptionDetails"`                                                                                              |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/link.md#subscriptiondetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                              |

### SubscriptionDetailsRoute Params

| プロパティー           | タイプ                               |
| ---------------- | --------------------------------- |
| `subscriptionId` | (必須)
  `string`

  サブスクリプションの ID。 |

### SubscriptionsRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"subscriptions"`                                                                       |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### TaxReportingLocationsRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"taxReportingLocations"`                                                               |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### TaxReportingRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"taxReporting"`                                                                        |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

## 1 次リンク

1 次スタイルは、リンクのデフォルトです。外部リソースやアプリケーション内の他のページにリンクする際に常に使用されます。

## 2 次リンク

2 次リンクは、以下の状況で使用します。

- リンクが近くにある 1 次ボタンまたは 1 次リンクと衝突する場合
- それぞれがリンクである多数のアイテムが 1 ページに表示される場合。1 ページに多数の 1 次リンクが表示されると混乱しやすくなります。このような状況では 2 次リンクを使用してください。
- Customer、Payment、Product などのオブジェクトをリンクする場合。UI でこれらのオブジェクトが参照されるすべての場所でリンクを設定する必要があります。1 ページで多数のオブジェクトがリンクされる可能性があるため、2 次スタイルを使用して視覚的混乱を招かないようにします。

## 無効化されたリンク

## 新しいタブでリンクを開く

## 指定できる href 値

`href` 属性は、相対 URL と HTTP または HTTPS URL をサポートしています。また、ダッシュボード内を移動するために[経路ディスクリプター](https://docs.stripe.com/stripe-apps/route-descriptors.md)を渡すこともできます。その他の値は実行時にサニタイズされます。


## See also

- [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md)
- [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)