Tablica segmentów w dynamicznej trasie w NextJS

W razie potrzeby można uzyskać tablicę wszystkich segmentów w jednej zmiennej. Aby to zrobić, parametr jest ujmowany w nawiasy kwadratowe, a przed nazwą parametru stawiamy wielokropek. Spójrzmy na przykład.

Załóżmy, że mamy trasę następującego rodzaju: /prod/:category/:name/:id/, gdzie parametry oznaczone dwukropkiem są dynamiczne. Otrzymajmy tablicę wartości tych parametrów w dowolną zmienną. Nazwa tej zmiennej może być dowolna. Na przykład, nazwijmy ją slugs.

Stwórzmy następującą strukturę plików:

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

Stwórzmy odpowiedni komponent:

export default function Prod({ params }) {
	console.log(params); // tablica wartości
}

Stwórz trasę obsługującą adresy rodzaju /prod/:category/:name.

Załóżmy, że dana jest następująca tablica:

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,
	},
];

Spowoduj, że w zależności od wartości parametrów w wizualnej części komponentu wyświetlany był odpowiadający produkt.