Skip to content
QuickGUI

Routing

Declare routes, render the match in the current window, and navigate with links or UseRouter.

#Routes

Use ui.Route for pages and ui.Layout for shared chrome. ui.Outlet is where the matched child renders.

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") },
	})
}

#Nested layouts

Wrap related routes in ui.Layout. Navigation between sibling routes keeps the layout mounted, so its local state survives.

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() exposes Navigate, Replace, Back, and Forward. ui.Link declares a target. Push adds a history entry; replace updates the current one.

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

#Route parameters

Read path parameters with ui.UseParams, query values with ui.UseSearchParams, and the current location with ui.UseLocation. Read them when you display the value so the text stays current. A :name segment captures one path parameter.

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"],
						),
					)
				},
			),
		},
	})
}