Routing

Table of Contents

• Description
• Routing components
• Routing simple UI elements

Description

Progressive web apps created with the go-app package are working as a single page application.

At first navigation, the app is loaded in the browser. Then, each time a new page is requested, the request is intercepted and the UI elements that match the new page URL are loaded.

Routing UI elements from a URL can be done by using the Route() function.

func Route(path string, n UI)

Routing components

The routing of a component can be done by creating a component and passing in the Route() function.

type foo struct {
    app.Compo
}

type bar struct {
    app.Compo
}

func main() {
    app.Route("/", foo{})    // foo will be loaded when navigating on /
    app.Route("/foo", foo{}) // foo will be loaded when navigating on /foo
    app.Route("/bar", bar{}) // bar will be loaded when navigating on /bar
}

Note that components are associated with a URL path. Navigating to a defined path will always load the same associated component.

If a component is changing its content depending on a URL parameter, it should be initialized by implementing the OnNav() method.

type foo struct {
    app.Compo
    bar string
}

func (f *foo) OnNav(ctx app.Context, u *url.URL) {
    bar := u.Query().Get("bar")
    if bar == "" {
        bar = "bar"
    }

    f.bar = bar
    f.Update()
}

func (f *foo) Render() app.UI {
    return app.H1().Body(
        app.Text("Foo, "),
        app.Text(f.bar),
    )
}

func main() {
    app.Route("/", foo{})
}

See the Components OnNav section.

Routing simple UI elements

If the UI to display does not require any logic, the Route() function can also take a simple UI element tree.

func main() {
    app.Route("/", app.H1().Body(
        app.Text("foo bar"),
    ))
}