# Routa sidor i webbläsaren utan att ladda om

> Registrera rutter på klientsidan med ROUTE(), navigera med REDIRECT(), läs URL-parametrarna och query string från NAV och gå bakåt i historiken.

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

jComponent har en egen router för ensidesapplikationer. `ROUTE(url, fn)` registrerar en rutt: `{name}`-segment skickas till `fn` som argument, i ordning. `REDIRECT(url)` ändrar adressen med History API (utan sidladdning) och kör den matchande rutten. Rutter jämförs segment för segment: en rutt och en URL måste ha lika många segment, och `*` matchar vilket värde som helst på sin plats. `NAV` beskriver den aktuella platsen: `NAV.url` är sökvägen, `NAV.query` den tolkade query string och `NAV.params` rutens argument. `NAV.back()` och `NAV.forward()` rör sig genom den historik som jComponent för.

För servern är det fortfarande en enda sida, så varje URL under din applikation måste returnera samma HTML (en `ROUTE('GET /*')` som renderar skalet), annars skulle en omladdning på `/users/5/` ge ett 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>
```
