nicegui_spa_routes.py

from dataclasses import dataclass
from typing import Callable
from nicegui.element import Element
from nicegui import ui, Client


#### ROUTES.PY ####
@dataclass
class Route:
    path: str
    title: str
    handler: Callable


class RouteManager:
    routes: dict[str, Route]
    current_route: Route

    def __init__(self) -> None:
        self.routes = dict()

    def register_route(self, route: Route):
        self.routes[route.path] = route

    def set_route(self, route_path: str):
        self.current_route = self.routes[route_path]

    async def run_route(self):
        await self.current_route.handler()


route_manager = RouteManager()


@dataclass
class State:
    element: Element


state = State(element=Element(""))


@dataclass
class Redirect:
    route_path: str

    async def run(self):
        route_manager.set_route(self.route_path)
        return await route_manager.run_route()


#### LAYOUT.PY ####
def menu_button(text: str, path: str):
    return ui.button(text, on_click=Redirect(path).run).style(add="width: 100%;")


async def layout_render():
    with ui.left_drawer():
        with ui.column():
            with ui.row().style(
                add="display: flex; align-items: center; justify-content: center; width: 100%;"
            ):
                ui.label("MENU")
            ui.separator()

            with ui.column().style(
                add="width: 100%; height: 85vh; display: grid; align-content: space-between;"
            ):
                with ui.column().style(add="width: 100%;"):
                    menu_button("Page 01", "page-1")
                    menu_button("Page 02", "page-2")


#### PAGE_01.PY ####
async def page_01():
    state.element.clear()
    with state.element:
        ui.label("Page 01")


page_01_route = Route("page-1", "Page 01", page_01)
route_manager.register_route(page_01_route)


#### PAGE_02.PY ####
async def page_02():
    state.element.clear()
    with state.element:
        ui.label("Page 02")


page_02_route = Route("page-2", "Page 02", page_02)
route_manager.register_route(page_02_route)

#### MAIN.PY ####
route_manager.set_route("page-1")


@ui.page("/")
async def render(client: Client):
    client.on_connect(layout_render)
    state.element = ui.card().style(add="width: 100%; height: 95vh; background: grey;")
    await route_manager.run_route()


ui.run(dark=True)

v2_nicegui_spa_routes.py

from dataclasses import dataclass
from typing import Callable, Optional
from nicegui.element import Element
from nicegui import ui, Client


#### ROUTES.PY ####
@dataclass
class Route:
    path: str
    title: str
    handler: Callable


class RouteManager:
    routes: dict[str, Route]
    current_route: Route
    element: Element

    def __init__(self) -> None:
        self.routes = dict()

    def register_route(self, route: Route):
        self.routes[route.path] = route

    def set_current_route(self, route_path: str):
        self.current_route = self.routes[route_path]


route_manager = RouteManager()


class Navigator:
    def __init__(self, route_path: str, route_data: Optional[any] = None) -> None:
        self.route_path: str = route_path
        self.route_data = route_data

    async def redirect(self):
        route_manager.set_current_route(self.route_path)
        route_manager.element.clear()
        return await route_manager.current_route.handler(self.route_data)


#### LAYOUT.PY ####
def menu_button(text: str, path: str):
    return ui.button(
        text, on_click=Navigator(path, (route_manager.current_route.title)).redirect
    ).style(add="width: 100%;")


async def layout_render():
    with ui.left_drawer():
        with ui.column():
            with ui.row().style(
                add="display: flex; align-items: center; justify-content: center; width: 100%;"
            ):
                ui.label("MENU")
            ui.separator()

            with ui.column().style(
                add="width: 100%; height: 85vh; display: grid; align-content: space-between;"
            ):
                with ui.column().style(add="width: 100%;"):
                    menu_button("Page 01", "page-1")
                    menu_button("Page 02", "page-2")


#### PAGE_01.PY ####
async def page_01(data):
    with route_manager.element:
        ui.label(data)


page_01_route = Route("page-1", "Page 01", page_01)
route_manager.register_route(page_01_route)


#### PAGE_02.PY ####
async def page_02(data=None):
    with route_manager.element:
        ui.label("Não Usa Data")


page_02_route = Route("page-2", "Page 02", page_02)
route_manager.register_route(page_02_route)


#### MAIN.PY ####
@ui.page("/")
async def render(client: Client):
    client.on_connect(layout_render)
    route_manager.element = ui.card().style(
        add="width: 100%; height: 95vh; background: grey;"
    )
    await Navigator("page-1").redirect()


ui.run(dark=True)