# Δρομολόγηση σελίδων στον περιηγητή χωρίς επαναφόρτωση

> Καταχωρίστε διαδρομές στην πλευρά του πελάτη με το ROUTE(), πλοηγηθείτε με το REDIRECT(), διαβάστε τις παραμέτρους του URL και το query string από το NAV και γυρίστε πίσω στο ιστορικό.

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

Το jComponent έχει δικό του δρομολογητή για εφαρμογές μίας σελίδας. Το `ROUTE(url, fn)` καταχωρίζει μια διαδρομή: τα τμήματα `{name}` περνούν στο `fn` ως ορίσματα, με τη σειρά. Το `REDIRECT(url)` αλλάζει τη διεύθυνση με το History API (χωρίς φόρτωση σελίδας) και εκτελεί την αντίστοιχη διαδρομή. Οι διαδρομές συγκρίνονται τμήμα προς τμήμα: μια διαδρομή και ένα URL πρέπει να έχουν τον ίδιο αριθμό τμημάτων και το `*` ταιριάζει με οποιαδήποτε τιμή στη θέση του. Το `NAV` περιγράφει την τρέχουσα θέση: το `NAV.url` είναι η διαδρομή, το `NAV.query` το αναλυμένο query string και το `NAV.params` τα ορίσματα της διαδρομής. Τα `NAV.back()` και `NAV.forward()` κινούνται στο ιστορικό που κρατά το jComponent.

Για τον διακομιστή αυτό παραμένει μία σελίδα, οπότε κάθε URL κάτω από την εφαρμογή σας πρέπει να επιστρέφει το ίδιο HTML (ένα `ROUTE('GET /*')` που αποδίδει το σκελετό), αλλιώς μια επαναφόρτωση στο `/users/5/` θα έδινε 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>
```