Routing

Kog routing reads like React Router: a <Router> wrapping <Routes> and <Route>, with <Outlet /> for nesting. useNavigate() moves you around, useParams() reads /room/:id, and <NavLink> styles itself when it matches.

The difference is underneath. A top-level route owns a real LVGL screen, so moving between them is a native screen load rather than a JS re-render. Routes nested inside one render in place through <Outlet /> — which is why the header and tab bar below never rebuild as you move between tabs.

Tap Rooms and About to move between nested routes: the shell above them stays mounted. Tap a room to navigate to /room/:id and read the param, then Back to call navigate(-1).

Going back rebuilds

navigate(-1) re-matches the previous location and builds it fresh. It does not restore that screen's widget state, because Kog keeps no stack of live screens — that is what bounds memory on a microcontroller. Lift anything that must survive a round trip into state above the route.

Next: hardware →