bug: Navigation and Routing example doesn't work

[iBuitron]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

Navigation and Routing

1. Just need to add arg on ft.View
2. on launch, it doesn't show the " / " view, have to go to "/store" an them back to show " / " view.

import flet as ft

def main(page: ft.Page):
    page.title = "Routes Example"

    def route_change(route):
        page.views.clear()
        page.views.append(
            ft.View(
                "/",
                [
                    ft.AppBar(title=ft.Text("Flet app"), bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST),
                    ft.Button("Visit Store", on_click=lambda _: page.go("/store")),
                ],
            )
        )
        if page.route == "/store":
            page.views.append(
                ft.View(
                    "/store",
                    [
                        ft.AppBar(title=ft.Text("Store"), bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST),
                        ft.Button("Go Home", on_click=lambda _: page.go("/")),
                    ],
                )
            )
        page.update()

    def view_pop(view):
        page.views.pop()
        top_view = page.views[-1]
        page.go(top_view.route)

    page.on_route_change = route_change
    page.on_view_pop = view_pop
    page.go(page.route)


ft.run(main, view=ft.AppView.WEB_BROWSER)

Solution:
Add arg on

            ft.View(
                    route="/store",
                    controls=[
                        ft.AppBar(title=ft.Text("Store"), bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST),
                        ft.Button("Go Home", on_click=lambda _: page.go("/")),
                    ],
                )

[iBuitron]

Also, when edit and saving, hot reload doesn't works

[FeodorFitsner]

Are you taking example from a cookbook? If so, please find updated examples here: https://github.com/flet-dev/flet/tree/main/sdk/python/examples/apps/routing_navigation

The documentation for 0.80.0 is still in progress. We are updating it in the moment.

[iBuitron]

@FeodorFitsner

import asyncio
from types import ModuleType

import flet as ft


class Router:
    """
    Module-based routing system for Flet applications.
    Each module must have a view() function that returns a ft.View instance.

    Supports both exact routes (e.g., '/home') and template routes with parameters
    (e.g., '/books/:id', '/account/:account_id/orders/:order_id').
    """

    def __init__(self, page: ft.Page, routes: list[ModuleType]) -> None:
        """
        Initializes the router with a list of route modules.
        Each module must have a 'route' attribute defining its path.

        Args:
            page: Flet page instance
            routes: List of modules containing a view() function and route attribute
        """
        self.page = page
        self.routes = routes
        self._static_routes = {}  # Exact match routes for O(1) lookup
        self._template_routes = []  # Template routes with parameters
        self._build_route_map()

    def _build_route_map(self) -> None:
        """Builds route mappings from the provided modules."""
        for module in self.routes:
            if not hasattr(module, "view"):
                raise AttributeError(
                    f"Module {module.__name__} does not have a 'view()' function"
                )

            # Get route by calling view() without parameters
            try:
                view_instance = module.view()
                if not isinstance(view_instance, ft.View):
                    raise TypeError(
                        f"The view() function in module {module.__name__} "
                        f"must return a ft.View instance"
                    )
                route_path = view_instance.route
            except TypeError as e:
                raise AttributeError(
                    f"Module {module.__name__}: view() must be callable without parameters. "
                    f"Use default values for all parameters (e.g., id: str = None). Error: {e}"
                )

            # Separate static routes from template routes
            if ":" in route_path:
                # Extract parameter names from template
                param_names = [
                    part[1:] for part in route_path.split("/") if part.startswith(":")
                ]
                self._template_routes.append(
                    {
                        "path": route_path,
                        "module": module,
                        "params": param_names,  # Cache parameter names
                    }
                )
            else:
                self._static_routes[route_path] = module

    def get_view(self, route: str) -> ft.View | None:
        """
        Retrieves the view corresponding to a given route.
        Supports both exact route matching and template route matching with parameters.

        Args:
            route: The requested route path

        Returns:
            ft.View instance if the route exists, None otherwise
        """
        # Try exact match first (O(1) lookup)
        module = self._static_routes.get(route)
        if module:
            return module.view()

        # Try template route matching for parameterized routes
        troute = ft.TemplateRoute(route)
        for template_route in self._template_routes:
            if troute.match(template_route["path"]):
                # Extract parameters using cached parameter names
                params = {
                    param: getattr(troute, param)
                    for param in template_route["params"]
                    if hasattr(troute, param)
                }
                view = template_route["module"].view(**params)

                # Update the view's route to use actual values instead of template
                view.route = route

                return view

        return None

    def get_all_routes(self) -> list[str]:
        """Returns all registered route paths."""
        static = list(self._static_routes.keys())
        template = [tr["path"] for tr in self._template_routes]
        return static + template

    def route_exists(self, route: str) -> bool:
        """Checks if a route exists in the router."""
        # Check static routes first
        if route in self._static_routes:
            return True

        # Check template routes
        troute = ft.TemplateRoute(route)
        for template_route in self._template_routes:
            if troute.match(template_route["path"]):
                return True

        return False

    async def route_change(self) -> None:
        """
        Handles route changes in the page.
        Clears current views and loads the view for the current route.
        """
        self.page.views.clear()

        # Search for the view matching the current route
        view = self.get_view(self.page.route)

        if view:
            self.page.views.append(view)
        else:
            # Display 404 view for non-existent routes
            self.page.views.append(
                ft.View(
                    route=self.page.route,
                    controls=[
                        ft.AppBar(title=ft.Text("Error 404")),
                        ft.Container(
                            content=ft.Column(
                                [
                                    ft.Text(
                                        "404 - Page Not Found",
                                        size=24,
                                        weight=ft.FontWeight.BOLD,
                                    ),
                                    ft.Text(
                                        f"Route: {self.page.route}",
                                        size=14,
                                        color=ft.Colors.GREY,
                                    ),
                                    ft.Button(
                                        "Go to Home",
                                        on_click=lambda _: asyncio.create_task(
                                            self.page.push_route("/")
                                        ),
                                    ),
                                ],
                                alignment=ft.MainAxisAlignment.CENTER,
                                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                                spacing=20,
                            ),
                            padding=40,
                            alignment=ft.Alignment.CENTER,
                        ),
                    ],
                )
            )

        self.page.update()

    async def view_pop(self, e: ft.ViewPopEvent) -> None:
        """
        Handles the view pop event when navigating back.

        Args:
            e: View pop event containing the view being popped
        """
        if e.view is not None:
            self.page.views.remove(e.view)
            top_view = self.page.views[-1]
            await self.page.push_route(top_view.route)

    async def initialize(self) -> None:
        """Initializes the router and navigates to the current route."""

        self.page.on_route_change = self.route_change
        self.page.on_view_pop = self.view_pop

        await self.route_change()

USE

# home.py
import flet as ft

def view() -> ft.View:
    return ft.View(route="/", controls=[ft.Text("This is Home page")])

# page_1.py
import flet as ft

def view() -> ft.View:
    return ft.View(route="/page_1", controls=[ft.Text("This is page 1")])

# books.py
import asyncio
import flet as ft

def view(id: str = None) -> ft.View:
    """View for displaying a specific book by ID"""
    return ft.View(
        route="/books/:id",
        controls=[
            ft.AppBar(title=ft.Text(f"Book Details")),
            ft.Container(
                content=ft.Column(
                    [
                        ft.Text(f"Book ID: {id}", size=24, weight=ft.FontWeight.BOLD),
                        ft.Text(f"Viewing details for book {id}", size=16),
                        ft.Divider(),
                        ft.Button(
                            "Back to Home",
                            on_click=lambda _: asyncio.create_task(
                                _.page.push_route("/")
                            ),
                        ),
                    ]
                ),
                padding=20,
            ),
        ],
    )

# main.py
import flet as ft

from learn_flet.frontend.pages import books, home, page_1
from learn_flet.frontend.utils.router import Router


async def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT
    router = Router(page=page, routes=[home, page_1, books])
    await router.initialize()


if __name__ == "__main__":
    ft.run(main)

flet run --web -r

[FeodorFitsner]

You mean that code doesn't work in 0.80.0?

[iBuitron]

You mean that code doesn't work in 0.80.0?

it works, just a Router Implementation.

[yunguangli]

same here. The example in https://docs.flet.dev/cookbook/navigation-and-routing/#url-strategy-for-web shows blank page , under Flet 0.80.0

[FeodorFitsner]

@yunguangli use the code from examples: #5943 (comment)