Function Router

sdk/python/packages/flet/src/flet/components/router.py:594–902

Top-level router component that matches the current page route against a tree of :class:`~flet.Route` definitions and renders the matched component chain. The Router subscribes to :attr:`~flet.Page.on_route_change` and re-renders automatically when the route changes. Navig

(
    routes: list[Route],
    not_found: Callable | None = None,
    manage_views: bool = False,
)

@component
def Router(
    routes: list[Route],
    not_found: Callable | None = None,
    manage_views: bool = False,
) -> Control:
    """
    Top-level router component that matches the current page route against
    a tree of :class:`~flet.Route` definitions and renders the matched
    component chain.

    The Router subscribes to :attr:`~flet.Page.on_route_change`
    and re-renders automatically when the route changes.

    Navigation is done via :meth:`~flet.Page.push_route` or
    :meth:`~flet.Page.navigate`.

    When `manage_views` is `True`, the Router returns a list of
    :class:`~flet.View` objects (one per path level) instead of a single
    component tree. This enables swipe-back gestures, system back button,
    and :class:`~flet.AppBar` implicit back button on mobile.
    Must be used with :meth:`~flet.Page.render_views`.

    Args:
        routes: List of top-level :class:`~flet.Route` definitions.
        not_found: Optional component to render when no route matches (404).
        manage_views: When `True`, produce a list of
            :class:`~flet.View` objects (one per path level) instead of a
            single component tree. Route components should return
            :class:`~flet.View` instances with `route` and `appbar`
            set. Use with :meth:`~flet.Page.render_views`.

    Example:
        ```python
        @ft.component
        def App():
            return ft.Router(
                [
                    ft.Route(index=True, component=Home),
                    ft.Route(path="about", component=About),
                    ft.Route(path="products/:pid", component=ProductDetails),
                ],
                manage_views=True,
            )
        ```
    """
    page = context.page
    location, set_location = use_state(page.route or "/")
    prev_route_handler_ref = use_ref(None)
    prev_pop_handler_ref = use_ref(None)
    # Last non-modal location the Router saw. Used as the base for
    # global modal routes (declared at the top level) — when the user
    # navigates from /apps/X to /settings (modal=True), the modal is
    # rendered ON TOP OF the chain matched against /apps/X, so closing
    # it reveals the original stack instead of rebuilding it.
    prev_non_modal_location_ref = use_ref(None)
    # Snapshot of the chain emitted for the current location. Used by
    # the default pop handler to compute the parent URL structurally
    # (`chain[-2].resolved_path`), which survives shared `view.route`