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: Kog keeps no stack of live screens, and that is what bounds memory on a microcontroller. Lift anything that must survive a round trip into state above the route.

Query strings, matching, and route lifecycle

This second app starts at /items/7?tab=info. Change the query, follow the links, and go back. The screen reports the current location, navigation action, match, and focus state. Its console shows pure path helpers and route focus cleanup.

MemoryRouter owns the history. useSearchParams updates the query without losing the route. useResolvedPath resolves relative links, useMatch reads parameters for a pattern, and Navigate handles the fallback route. useFocusEffect cleans up when a route is disposed; Kog has no mounted-but-covered screens. createPath, parsePath, resolvePath, generatePath, matchPath, matchRoutes, SearchParams, and hrefOf are host-independent helpers.

Next: hardware →