NextJS-ում զուգահեռ երթուղավորում

NextJS-ում կարելի է կարգավորել, որ կայքի մի մասը ցույց տար տարբեր բովանդակություն կախված հարցված URL-ից: Սա կոչվում է զուգահեռ երթուղավորում:

Դիտարկենք օրինակով: Ենթադրենք ունենք հետևյալ կայքի դասավորությունը.

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          header
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

Ենթադրենք, որ ցանկանում ենք, որ վերնագրում արտահայտվի դինամիկ տեղեկատվություն: Ենթադրենք /users URL-ի դեպքում ցուցադրվի օգտատերերի բաղադրիչը, իսկ /posts URL-ի դեպքում գրառումների բաղադրիչը:

Նման զուգահեռ երթուղավորման համար անհրաժեշտ է ստեղծել հատուկ պանակ, որի անունը սկսվում է @ նշանով: Օրինակի համար մեր պանակը կանվանենք @info:

Այս պանակում կտեղադրենք երկու բաղադրիչ: Առաջինը օգտատերերի ցուցադրման համար /users/ պանակում, իսկ երկրորդը գրառումների ցուցադրման համար /posts/ պանակում: Մենք կստանանք հետևյալ ֆայլային կառուցվածքը.

• /app//@info//users/page.jsx/posts/page.jsx

Այժմ մեզ անհրաժեշտ է կայքի դասավորության մեջ գրել հատուկ հրաման ներդրման համար: Դրա համար անհրաժեշտ է օգտագործել հատուկ դինամիկ սլոտ:

Հասկանալու համար, թե ինչ է սա, նախ նայեք մեր կայքի դասավորության ֆունկցիայի պարամետրին.

app/layout.jsxexport default function RootLayout({children}) {
  return (
    
  );
}

Ուշադրություն դարձրեք, որ պարամետրով մեզ է փոխանցվում օբյեկտ, որից մենք հանում ենք կայքի բովանդակությունը փոփոխականի մեջ children:

Այս օբյեկտում կարող են լինել նաև այլ բանալիներ: Դրանք համապատասխանում են այն պանակներին, որոնց անունը մենք սկսել ենք @-ով:

Մեր դեպքում ունենք @info պանակ, ինչը նշանակում է, որ մեզ համար հասանելի կլինի info փոփոխականը, որը կախված URL-ից կպարունակի մեկը երկու բաղադրիչներից - օգտատերեր կամ գրառումներ: Ստացենք այս փոփոխականը.

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    
  );
}

Այժմ դասավորության ներսում մենք կարող ենք արտածել info փոփոխականը: Այս տեղում կախված URL-ից կտեղադրվի մեր բաղադրիչներից մեկի տեքստը.

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    <html lang="en">
      <body>
        <header>
          <div>
            {info}
          </div>
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}