Ενσωματωμένες Διαδρομές στο React Router

Σε αυτό το μάθημα, θα γνωριστούμε με τις ενσωματωμένες διαδρομές. Ξεκινήστε την εφαρμογή που φτιάξαμε στο προηγούμενο μάθημα. Κάνοντας κλικ στους συνδέσμους, εμφανιζόμαστε σε μια ξεχωριστή σελίδα με το προϊόν. Ας υποθέσουμε ότι δεν μας βολεύει να συμβαίνει αυτό, και θα θέλαμε, η λίστα με τα προϊόντα και η σελίδα του προϊόντος να εμφανίζονται δίπλα, στην ίδια οθόνη για μεγαλύτερη σαφήνεια. Ας το κάνουμε έτσι.

Για αυτό, ας ανοίξουμε το αρχείο main.jsx και απλά ας κάνουμε τη διαδρομή μας για τη σελίδα του προϊόντος θυγατρική διαδρομή της κύριας διαδρομής ή, με άλλα λόγία, "να την ενσωματώσουμε" στην κύρια διαδρομή. Για αυτό, θα χρησιμοποιήσουμε άλλη μια ιδιότητα του αντικειμένου διαδρομής children:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},

]);

Κάνουμε κλικ ξανά στους συνδέσμους, αλλά δεξιά από τη λίστα προϊόντων δεν βλέπουμε τίποτα. Επειδή δεν είπαμε στην κύρια διαδρομή πού θέλουμε να εμφανίσουμε τις θυγατρικές της διαδρομές.

Ακριβώς για την εμφάνιση των στοιχείων των θυγατρικών διαδρομών στο γονικό, θα μας βοηθήσει το component Outlet. Ας το εισάγουμε από την βιβλιοθήκη στο αρχείο για την κύρια διαδρομή:

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

Μετά, ας το τυλίξουμε σε ένα div #product και ας το προσθέσουμε στο layout για την κύρια διαδρομή στο τέλος της σήμανσης μετά από το κλείσιμο της ετικέτας nav, και ολόκληρη την κατασκευή θα την τυλίξουμε ακόμα σε ένα div #main:

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

Κάνοντας κλικ στους συνδέσμους, τώρα βλέπουμε και τη λίστα προϊόντων και τη σελίδα του προϊόντος.

Ας προσθέσουμε λίγα στυλ στο index.css:

h1, h2 {
	margin: 0;
}

div#main {
	display: flex;
	margin: 20px;
}

div#product {
	margin-left: 40px;
}

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

Και τώρα κάντε το έτσι, ώστε με κλικ στους συνδέσμους στην οθόνη να εμφανίζεται τόσο η λίστα των μαθητών όσο και η σελίδα του μαθητή.