# Seiten im Browser ohne Neuladen routen

> Registriere clientseitige Routen mit ROUTE(), navigiere mit REDIRECT(), lies die URL-Parameter und den Query-String aus NAV und gehe im Verlauf zurück.

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

jComponent hat einen eigenen Router für Single-Page-Anwendungen. `ROUTE(url, fn)` registriert eine Route: `{name}`-Segmente werden der Reihe nach als Argumente an `fn` übergeben. `REDIRECT(url)` ändert die Adresse mit der History API (ohne Seitenladen) und führt die passende Route aus. Routen werden Segment für Segment verglichen: Eine Route und eine URL müssen dieselbe Anzahl an Segmenten haben, und `*` passt an seiner Position auf jeden Wert. `NAV` beschreibt den aktuellen Ort: `NAV.url` ist der Pfad, `NAV.query` der geparste Query-String und `NAV.params` die Argumente der Route. `NAV.back()` und `NAV.forward()` bewegen sich durch den Verlauf, den jComponent führt.

Für den Server ist das weiterhin eine einzige Seite, daher muss jede URL unterhalb deiner Anwendung dasselbe HTML liefern (ein `ROUTE('GET /*')`, das das Grundgerüst rendert), sonst ergäbe ein Neuladen auf `/users/5/` ein 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>
```