Πίνακας Τμημάτων στη Δυναμική Δρομολόγηση στο NextJS

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

Ας υποθέσουμε ότι έχουμε μια διαδρομή της ακόλουθης μορφής: /prod/:category/:name/:id/, όπου οι παράμετροι που σημειώνονται με άνω και κάτω τελεία είναι δυναμικές. Ας λάβουμε έναν πίνακα με τις τιμές αυτών των παραμέτρων σε κάποια μεταβλητή. Το όνομα αυτής της μεταβλητής μπορεί να είναι οποιοδήποτε. Για παράδειγμα, ας την ονομάσουμε slugs.

Ας δημιουργήσουμε την ακόλουθη δομή αρχείων:

/app/
- /prod/
  - /[...slugs]/

Ας δημιουργήσουμε το αντίστοιχο στοιχείο:

export default function Prod({ params }) {
	console.log(params); // πίνακας τιμών
}

Δημιουργήστε μια διαδρομή που να χειρίζεται διευθύνσεις της μορφής /prod/:category/:name.

Ας υποθέσουμε ότι υπάρχει ο ακόλουθος πίνακας:

let prods = [
	{
		category: 'catg1',
		name: 'prod1',
		cost: 100,
	},
	{
		category: 'catg1',
		name: 'prod2',
		cost: 200,
	},
	{
		category: 'catg2',
		name: 'prod1',
		cost: 300,
	},
	{
		category: 'catg2',
		name: 'prod3',
		cost: 400,
	},
];

Φροντίστε ώστε ανάλογα με τις τιμές των παραμέτρων, στο σήμανση του στοιχείου να εμφανίζεται το αντίστοιχο προϊόν.