# Enruta páginas en el navegador sin recargar

> Registra rutas en el cliente con ROUTE(), navega con REDIRECT(), lee los parámetros de la URL y la query string desde NAV y vuelve atrás en el historial.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 4757edf3eb996a73f9e88b47a317208d3e43728cd31e67ee0a13c9b3d5c74560
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

jComponent tiene su propio enrutador para aplicaciones de una sola página. `ROUTE(url, fn)` registra una ruta: los segmentos `{name}` se pasan a `fn` como argumentos, en orden. `REDIRECT(url)` cambia la dirección con la History API (sin cargar la página) y ejecuta la ruta que coincide. Las rutas se comparan segmento a segmento: una ruta y una URL deben tener el mismo número de segmentos, y `*` coincide con cualquier valor en su posición. `NAV` describe la ubicación actual: `NAV.url` es la ruta, `NAV.query` la query string ya interpretada y `NAV.params` los argumentos de la ruta. `NAV.back()` y `NAV.forward()` se mueven por el historial que mantiene jComponent.

Para el servidor esto sigue siendo una sola página, así que todas las URL bajo tu aplicación tienen que devolver el mismo HTML (un `ROUTE('GET /*')` que renderice el esqueleto); si no, recargar en `/users/5/` daría 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>
```