Routing — $mol

Routing

Routing in $mol is not a separate library — the URL is just another piece of reactive state. Read it, write it, and views react the same way they react to any cell. The back button, deep links, and shareable URLs all come for free.

The URL as state

$mol_state_arg exposes URL parameters as reactive values. Bind one to a property and the address bar becomes your source of truth:1namespace $.$$ {2 export class $my_app extends $.$my_app {3 @ $mol_mem4 page( next?: string ) {5 return $mol_state_arg.value( 'page', next ) ?? 'home'6 }7 }8}Reading page() returns the current value; calling page('about') navigates. Anything that reads page() re-renders on change — including the browser's back button, which updates the cell for you.

Switching screens

Combine a routed value with a plain switch to choose what renders. Because views are

lazy, the screens you don't show are never built:1@ $mol_mem2body_content() {3 switch ( this.page() ) {4 case 'about': return [ this.About() ]5 case 'docs': return [ this.Docs() ]6 default: return [ this.Home() ]7 }8}

Links that set arguments

In view.tree, a link can set URL arguments declaratively — clicking it navigates with no handler:1<= About_link $mol_link2 arg *3 page \about4 sub / <= about_label \About$mol_link also marks itself active (mol_link_current) when its arguments match the current URL, so highlighting the current page needs no extra state.

Multiple parameters

Arguments are independent, so a screen can route on several at once. This very docs site routes on both section and page:1<= Guide_link $mol_link2 arg *3 section \docs4 page \viewsEach key round-trips through the URL, so any view is shareable and bookmarkable by construction. Setting one argument leaves the others untouched, which makes a deep link (a specific section, page, and anchor) just a matter of setting the keys you care about.Edit this page on GitHubWas this helpful?YesNoPreviousState & Reactivity NextRenderingOn this pageThe URL as state Switching screens Links that set arguments Multiple parameters State that shouldn't be in the URL Next