Rails Navigation

Ruflet navigation uses page.route and a stack of view controls in page.views. page.go(route) changes the route, and the client back action removes the top view.

Ruflet::Rails.routed manages the route-change and back handlers for a multi-screen Rails Ruflet app.

Route stack

Ruflet.run do |page|
  Ruflet::Rails.routed(page) do |route, navigation|
    navigation.push(
      view(
        route: "/",
        appbar: app_bar(title: text("Account")),
        controls: [
          filled_button(
            content: text("Open settings"),
            on_click: ->(_event) { page.go("/settings") }
          )
        ]
      )
    )

    if route == "/settings"
      navigation.push(
        view(
          route: "/settings",
          appbar: app_bar(title: text("Settings")),
          controls: [text("Settings screen")]
        )
      )
    end
  end
end

For /, the stack contains the account view. For /settings, it contains the account view followed by the settings view.

Route map

For exact routes, register a builder per route:

Ruflet::Rails::RouteStack.new(page)
  .on("/") { |navigation| navigation.push(home_view) }
  .on("/settings") { |navigation|
    navigation.push(home_view)
    navigation.push(settings_view)
  }
  .start

Mounted route versus page route

These are separate:

• The Rails mount path, such as /app, is where the complete Ruflet web application is served.
• page.route, such as /settings, is navigation inside that Ruflet application.

A resource component generated by a Rails scaffold manages its own index and detail rendering. Use a route stack when the application needs several independent screens with native back navigation.