# Instradare le pagine nel browser senza ricaricare

> Registra rotte lato client con ROUTE(), naviga con REDIRECT(), leggi i parametri dell'URL e la query string da NAV e torna indietro nella cronologia.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: 6530cad2eaa35963d6146fcd443fa8bcc12b97451313494b68f8bf8041dc7b2a
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

jComponent ha un proprio router per le applicazioni a pagina singola. `ROUTE(url, fn)` registra una rotta: i segmenti `{name}` vengono passati a `fn` come argomenti, in ordine. `REDIRECT(url)` cambia l'indirizzo con la History API (senza caricare la pagina) ed esegue la rotta corrispondente. Le rotte vengono confrontate segmento per segmento: una rotta e un URL devono avere lo stesso numero di segmenti, e `*` corrisponde a qualsiasi valore nella sua posizione. `NAV` descrive la posizione corrente: `NAV.url` è il percorso, `NAV.query` la query string interpretata e `NAV.params` gli argomenti della rotta. `NAV.back()` e `NAV.forward()` si muovono nella cronologia che jComponent mantiene.

Per il server questa resta una sola pagina, quindi ogni URL sotto la tua applicazione deve restituire lo stesso HTML (un `ROUTE('GET /*')` che renderizza lo scheletro), altrimenti un ricaricamento su `/users/5/` darebbe un 404.

```html public/index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>

	<h1 id="title"></h1>

	<script>

		ROUTE('/', function() {
			$('#title').text('Home');
		});

		ROUTE('/users/{id}/', function(id) {
			$('#title').text('User ' + id);
		});

		ROUTE('/files/*', function() {
			$('#title').text('Files');
		});

	</script>

</body>
</html>
```