ルーティング

ルートを宣言し、現在のウィンドウで一致した結果を描画し、リンクまたは UseRouter で移動します。

#ルートの宣言

ページには ui.Route、共有の枠組みには ui.Layout を使います。ui.Outlet は一致した子が描画される場所です。

func RouterExample() *ui.Element {
	return ui.Router(ui.RouterProps{
		InitialPath: "/",
		Routes: []*ui.RouteDeclaration{
			ui.Route(
				"/",
				func() *ui.Element {
					return ui.Link(ui.LinkProps{Href: "/settings"}, "Settings")
				},
			),
			ui.Route(
				"/settings",
				func() *ui.Element { return ui.Text("Settings") },
			),
		},
		Fallback: func() *ui.Element { return ui.Text("Page not found") },
	})
}

#入れ子のレイアウト

関連するルートを ui.Layout で包みます。兄弟ルート間の移動ではレイアウトはマウントされたままで、ローカル状態が残ります。

func NestedRouterExample() *ui.Element {
	return ui.Router(ui.RouterProps{
		Routes: []*ui.RouteDeclaration{
			ui.Layout(
				func() *ui.Element {
					return ui.View().FlexCol().Gap(12).Children(
						ui.Link(ui.LinkProps{Href: "/"}, "Home"),
						ui.Link(ui.LinkProps{Href: "/settings"}, "Settings"),
						ui.Outlet(),
					)
				},
				ui.Route(
					"/",
					func() *ui.Element { return ui.Text("Home") },
				),
				ui.Route(
					"/settings",
					func() *ui.Element { return ui.Text("Settings") },
				),
			),
		},
	})
}

#ナビゲーション

ui.UseRouter() は Navigate、Replace、Back、Forward を公開します。ui.Link は行き先を宣言します。Push は履歴エントリを追加し、replace は現在のエントリを更新します。

func BackButton() *ui.Element {
	router := ui.UseRouter()
	return ui.Button().Child("Back").OnClick(router.Back)
}

#ルートパラメーター

パスパラメーターは ui.UseParams、クエリ値は ui.UseSearchParams、現在の location は ui.UseLocation で読みます。値を表示するときに読むと、テキストが最新のままになります。:name セグメントはパスパラメーターを 1 つキャプチャします。

func ParameterRouterExample() *ui.Element {
	return ui.Router(ui.RouterProps{
		InitialPath: "/projects/quickgui?tab=history",
		Routes: []*ui.RouteDeclaration{
			ui.Route(
				"/projects/:name",
				func() *ui.Element {
					params := ui.UseParams()
					search := ui.UseSearchParams()
					return ui.View().Children(
						ui.Text(
							"Project: ",
							params()["name"],
						),
						ui.Text(
							"Tab: ",
							search()["tab"],
						),
					)
				},
			),
		},
	})
}