Διαδρομή Ευρετηρίου στο React Router

Σε αυτό το μάθημα θα μάθουμε τι είναι οι διαδρομές ευρετηρίου.

Αρχικά, ας δώσουμε προσοχή σε ένα πράγμα. Όταν βρισκόμαστε στην κύρια σελίδα, στα δεξιά βλέπουμε απλά μια κενή οθόνη. Αυτό συμβαίνει επειδή καμία από τις θυγατρικές διαδρομές δεν ταιριάζει με τη διεύθυνση /, και δεν έχουμε πει τι να εμφανιστεί σε αυτήν την περίπτωση. Σε μια τέτοια περίπτωση, για να μην εμφανίζεται μια κενή σελίδα, μπορούμε να χρησιμοποιήσουμε μια διαδρομή ευρετηρίου - μια θυγατρική διαδρομή που δεν έχει μονοπάτι, και το στοιχείο της εμφανίζεται στο γονικό Outlet όταν δεν ταιριάζει καμία από το σύνολο των θυγατρικών. Με τέτοιες διαδρομές μπορούμε να τοποθετούμε πληροφορίες, ή στατιστικά, ή οτιδήποτε παρόμοιο. Όπως και στην περίπτωση των συνηθισμένων, μπορούν να χρησιμοποιηθούν για φόρτωση δεδομένων.

Ας δημιουργήσουμε το αρχείο index.jsx στον φάκελο routes, και σε αυτό το component Index:

export default function Index() {
	return (
		<div>
			<p>Γεια, React Router!</p>
			<p>Αυτή είναι μια εφαρμογή για τα προϊόντα μου :)</p>
		</div>
	);
}

Τώρα ας πάμε στο main.jsx και να εισάγουμε εκεί το component μας Index:

import Index from './routes/index';

Και ως πρώτο στοιχείο στον πίνακα children ας προσθέσουμε ένα αντικείμενο, όπου η ιδιότητα index ορίζεται σε true, και ως στοιχείο για εμφάνιση θα είναι το component μας Index:

{ index: true, element: <Index /> },

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