Rute opționale Catch-All [[…slug]] – Includerea și a rutei de bază în Next.js

app/magazin/[[...slug]]/page.tsx

// Se potrivește pe /magazin (fără segmente)
// și pe /magazin/electrocasnice/frigidere

Ce face Rute opționale Catch-All [[...slug]] - Includerea și a rutei de bază

Sintaxa cu paranteze duble [[...slug]] combină pagina principală a unei secțiuni și toate subpaginile sale într-un singur fișier.

Când este accesat `/magazin`, `params.slug` va fi `undefined`.

Când este accesat `/magazin/laptopuri/apple`, `params.slug` va fi `[‘laptopuri’, ‘apple’]`.

Elimină nevoia de a crea două fișiere `page.tsx` separate pentru rădăcină și subcategorii.

Exemple

Exemplul 1: Pagină unificată de catalog de produse cu filtrare opțională pe categorii

Distinge dacă este pe rădăcina magazinului sau pe o subcategorie.

export default async function CatalogPage({
  params,
}: {
  params: { slug?: string[] };
}) {
  if (!params.slug) {
    return <h1>Toate produsele din magazin</h1>;
  }

  return <h1>Filtru categorie: {params.slug.join(' > ')}</h1>;
}

Ieșire în terminal

O singură componentă deservește atât /magazin cât și /magazin/it/monitoare.

Greșeli frecvente

• Omiterea verificării dacă `params.slug` este definit; apelarea directă a lui `params.slug.join()` fără verificare va arunca eroare pe ruta de bază.

Comenzi înrudite

• Rute Catch-All [...slug] - Capturarea tuturor segmentelor ulterioare din URL: Extinde rutarea dinamică pentru a captura un număr variabil de segmente de cale imbricate într-un singur array.
• Segmente dinamice [id] - Crearea rutelor parametrizate: Generează rute dinamice unde segmentul definit între paranteze drepte [parametru] capturează valoarea din URL.