# Encaminhar páginas no navegador sem recarregar

> Registe rotas no cliente com ROUTE(), navegue com REDIRECT(), leia os parâmetros do URL e a query string a partir de NAV e volte atrás no histórico.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pt
Content-SHA256: 7d6caca6b05a974792cfe97a35d47f25e4135b29d2c0d7ce09618217c6576938
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

O jComponent tem o seu próprio router para aplicações de página única. `ROUTE(url, fn)` regista uma rota: os segmentos `{name}` são passados a `fn` como argumentos, por ordem. `REDIRECT(url)` altera o endereço com a History API (sem carregar a página) e executa a rota que corresponde. As rotas são comparadas segmento a segmento: uma rota e um URL têm de ter o mesmo número de segmentos, e `*` corresponde a qualquer valor na sua posição. `NAV` descreve a localização atual: `NAV.url` é o caminho, `NAV.query` a query string já interpretada e `NAV.params` os argumentos da rota. `NAV.back()` e `NAV.forward()` percorrem o histórico que o jComponent mantém.

Para o servidor isto continua a ser uma só página, por isso todos os URLs sob a sua aplicação têm de devolver o mesmo HTML (um `ROUTE('GET /*')` que renderize a estrutura), caso contrário recarregar em `/users/5/` daria um 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>
```