Δρομολόγηση από την πλευρά του client στο React Router

Σε αυτό το μάθημα θα εξετάσουμε ένα σημαντικό συστατικό των εφαρμογών μίας σελίδας (SPA) - τη δρομολόγηση από την πλευρά του client. Αυτή η δρομολόγηση μας επιτρέπει να ενημερώνουμε το URL στο πρόγραμμα πλοήγησης χωρίς πρόσθετα αιτήματα για έγγραφο από τον server.

Εκκινήστε την εφαρμογή που δημιουργήσαμε στο προηγούμενο μάθημα. Ανοίξτε τον πίνακα εργαλείων προγραμματιστή και σε αυτόν την καρτέλα 'Δίκτυο' (Network για Chrome). Μετά από κάθε κλικ στους συνδέσμους μας βλέπουμε κάθε φορά ένα αίτημα για document. Δηλαδή ζητάμε κάθε φορά από τον server να μας φορτώσει document.

Ας εκμεταλλευτούμε τώρα τα πλεονεκτήματα του React Router, για να απαλλαγούμε από τέτοια αιτήματα. Για να το κάνουμε αυτό, ας ανοίξουμε το root.jsx της εφαρμογής μας και ας αντικαταστήσουμε την ετικέτα a στη σήμανση με το στοιχείο Link. Για να ξεκινήσουμε, ας προσθέσουμε την εισαγωγή του:

import { Outlet, Link } from 'react-router-dom';

Τώρα ας αντικαταστήσουμε τις ετικέτες a με το χαρακτηριστικό href. Αντί για το κομμάτι κώδικα:

<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Θα έχουμε τώρα τον ακόλουθο κώδικα:

<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Ανοίγουμε ξανά την καρτέλα 'Δίκτυο' στον πίνακα εργαλείων προγραμματιστή, στη γραμμή διευθύνσεων ορίζουμε τη βασική διαδρομή και ανανεώνουμε τη σελίδα. Τώρα κάνουμε κλικ στους συνδέσμους και βλέπουμε ότι το document ζητήθηκε μόνο μία φορά κατά την αρχική φόρτωση και σε επόμενα κλικ δεν υπάρχει πλέον αίτημα προς τον server.

Πάρτε την εφαρμογή που δημιουργήσατε στις ασκήσεις των προηγούμενων μαθημάτων. Χρησιμοποιώντας το υλικό του μαθήματος, υλοποιήστε σε αυτήν δρομολόγηση από την πλευρά του client, μετατρέποντας τους συνδέσμους σας, όπως περιγράφηκε στο μάθημα.