# Pagina's in de browser routeren zonder opnieuw te laden

> Registreer routes aan de clientkant met ROUTE(), navigeer met REDIRECT(), lees de URL-parameters en de query string uit NAV en ga terug in de geschiedenis.

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

jComponent heeft zijn eigen router voor single-page-applicaties. `ROUTE(url, fn)` registreert een route: `{name}`-segmenten worden in volgorde als argumenten aan `fn` doorgegeven. `REDIRECT(url)` wijzigt het adres met de History API (zonder pagina te laden) en voert de passende route uit. Routes worden segment voor segment vergeleken: een route en een URL moeten evenveel segmenten hebben, en `*` komt op zijn plaats met elke waarde overeen. `NAV` beschrijft de huidige locatie: `NAV.url` is het pad, `NAV.query` de geparste query string en `NAV.params` de argumenten van de route. `NAV.back()` en `NAV.forward()` bewegen door de geschiedenis die jComponent bijhoudt.

Voor de server blijft het één pagina, dus elke URL onder je applicatie moet dezelfde HTML teruggeven (een `ROUTE('GET /*')` die het skelet rendert), anders zou herladen op `/users/5/` een 404 geven.

```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>
```