# Oldalak útválasztása a böngészőben újratöltés nélkül

> Regisztrálj kliensoldali útvonalakat a ROUTE()-tal, navigálj a REDIRECT()-tel, olvasd az URL-paramétereket és a query stringet a NAV-ból, és lépj vissza az előzményekben.

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

A jComponentnek saját routere van az egyoldalas alkalmazásokhoz. A `ROUTE(url, fn)` egy útvonalat regisztrál: a `{name}` szegmensek sorrendben argumentumként kerülnek az `fn`-hez. A `REDIRECT(url)` a History API-val módosítja a címet (oldalbetöltés nélkül), és lefuttatja az illeszkedő útvonalat. Az útvonalakat szegmensenként hasonlítja össze: egy útvonalnak és egy URL-nek ugyanannyi szegmensből kell állnia, a `*` pedig a helyén bármely értékre illeszkedik. A `NAV` az aktuális helyet írja le: a `NAV.url` az útvonal, a `NAV.query` a feldolgozott query string, a `NAV.params` pedig az útvonal argumentumai. A `NAV.back()` és a `NAV.forward()` a jComponent által vezetett előzményekben mozog.

A szerver számára ez továbbra is egyetlen oldal, ezért az alkalmazásod alatti minden URL-nek ugyanazt a HTML-t kell visszaadnia (egy `ROUTE('GET /*')`, amely a vázat rendereli), különben az `/users/5/` oldalon az újratöltés 404-et adna.

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