私のブックマーク
ブックマークを追加
ブックマークを削除Usage
import { Navigator } from '@wordpress/components';const MyNavigation = () => (<Navigator initialPath="/"><Navigator.Screen path="/"><p>This is the home screen.</p><Navigator.Button path="/child">Navigate to child screen.</Navigator.Button></Navigator.Screen><Navigator.Screen path="/child"><p>This is the child screen.</p><Navigator.BackButton>Go back</Navigator.BackButton></Navigator.Screen></Navigator>);
Hierarchical paths
Navigator は、画面がその path に従って階層的に整理されていることを前提としています。これは、各パスセグメントが / 文字で始まり、区切られる URL のようなスキームに従う必要があります。
Navigator は「戻る」ナビゲーションを親画面に戻るものとして扱います。したがって、コンポーネントの消費者が正しい画面階層を作成する責任があります。
例えば:
/はすべてのパスのルートです。常にpath="/"を持つ画面が必要です;/parent/childは/parentの子です;/parent/child/grand-childは/parent/childの子です;/parent/:paramは/parentの子でもあります;- 現在の画面に
path="/parent/child/grand-child"がある場合、「戻る」時にNavigatorは一致する画面（またはルート/）が見つかるまでパス階層を再帰的にナビゲートしようとします。
Height and animations
Navigator.Screen アニメーションの動作により、Navigator コンポーネントには height を割り当てることが推奨されます。これにより、画面間を移動する際の潜在的な UI ジャンプを防ぐことができます。
Individual components
Navigator は、4 つの個別のコンポーネントで構成されています:
Navigator: ラッパーコンポーネントおよびコンテキストプロバイダー。画面の表示と非表示の主要なロジックを保持します。Navigator.Screen: 単一のビュー/画面/パネルを表します;Navigator.Button: 別のNavigator.Screenにナビゲートするボタンをレンダリングします;Navigator.BackButton: 親Navigator.Screenにナビゲートするボタンをレンダリングします（階層パスに関する上記のセクションを参照）。
高度な使用法では、消費者は useNavigator フックを使用できます。
Navigator
Props
initialPath: string
初期アクティブパス。
- 必須: はい
children: string
子要素。
- 必須: はい
Navigator.Screen
Props
path: string
画面のパスで、ナビゲーターに保存されている現在のパスと一致します。
Navigator は、画面がその path に従って階層的に整理されていることを前提としています。これは、各パスセグメントが / 文字で始まり、区切られる URL のようなスキームに従う必要があります。
Navigator は「戻る」ナビゲーションを親画面に戻るものとして扱います。したがって、コンポーネントの消費者が正しい画面階層を作成する責任があります。
例えば:
/はすべてのパスのルートです。常にpath="/"を持つ画面が必要です。/parent/childは/parentの子です。/parent/child/grand-childは/parent/childの子です。/parent/:paramは/parentの子でもあります。- 現在の画面に
pathがあり、その値が/parent/child/grand-childの場合、「戻る」時にNavigatorは一致する画面（またはルート/）が見つかるまでパス階層を再帰的にナビゲートしようとします。 - 必須: はい
children: string
子要素。
- 必須: はい
Navigator.Button
Props
path: string
ナビゲートする画面のパス。このプロパティの値は HTML 属性の有効な値 である必要があります。
- 必須: はい
attributeName: string
Navigator.Button を識別するために使用される HTML 属性で、Navigator によってフォーカスを復元するために使用されます。
- 必須: いいえ
- デフォルト:
id
children: string
子要素。
- 必須: いいえ
Inherited props
Navigator.Button は、Button のすべての Button プロパティ を継承しますが、href と target は除きます。
Navigator.BackButton
Props
children: string
子要素。
- 必須: いいえ
Inherited props
Navigator.BackButton は、Button のすべての Button プロパティ を継承しますが、href と target は除きます。
useNavigator
navigator インスタンスを useNavigator フックを使用して取得できます。
Props
navigator インスタンスにはいくつかのプロパティがあります:
goTo: ( path: string, options: NavigateOptions ) => void
goTo 関数は、指定されたパスにナビゲートすることを可能にします。2 番目の引数は、異なるオプションでナビゲーション操作を拡張できます。
利用可能なオプションは:
focusTargetSelector:string。ナビゲーションバック時に一致する要素にフォーカスを復元するために使用される CSS セレクタを指定するためのオプションのプロパティ;isBack:boolean。ナビゲーションが後方と見なされるべきかどうかを指定するためのオプションのプロパティ（可能な場合はフォーカスの復元を有効にし、アニメーションも後方にする）;skipFocus:boolean。コンポーネントの消費者が自分でフォーカスを管理したい場合に便利なNavigatorのフォーカス管理をオプトアウトするためのオプションのプロパティ;
goBack: ( path: string, options: NavigateOptions ) => void
goBack 関数は、親画面にナビゲートすることを可能にします。親/子ナビゲーションは、定義したパスが階層的である場合にのみ機能します（上記の注意を参照）。
一致が見つからない場合、関数は一致する画面（またはルート /）が見つかるまでパス階層を再帰的にナビゲートしようとします。
利用可能なオプションは、goTo メソッドと同じですが、isBack プロパティは goBack メソッドでは利用できません。
location: NavigatorLocation
location オブジェクトは現在の位置を表し、いくつかのプロパティを持っています:
path:string。位置に関連付けられたパス。isBack:boolean。現在の位置が後方にナビゲートすることによって到達された場合、trueになります。isInitial:boolean。初期位置に対してのみtrueになります。
params: Record< string, string | string[] >
現在の位置からのパラメータの解析されたレコード。例えば、現在の画面パスが /product/:productId で、位置が /product/123 の場合、params は { productId: '123' } になります。
