Paralleelne ruutimine NextJS-is

NextJS-is on võimalik teha nii, et osa veebisaidist kuvab erinevat sisu sõltuvalt taotletud URL-ist. Seda nimetatakse paralleelseks ruutimiseks.

Vaatame näidet. Oletame, et meil on järgmine veebisaidi layout:

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

Oletame, et tahame, et päises kuvataks dünaamilist teavet. Oletame, et URL-il /users kuvatakse komponent kasutajatega, ja URL-il /posts komponent postitustega.

Sellise paralleelse ruutimise jaoks peame looma spetsiaalse kausta, alustades selle nime sümboliga @. Näiteks nimetame oma kausta @info.

Selles kaustas paigutame kaks komponenti. Esimene kasutajate kuvamiseks kaustas /users/, ja teine postituste kuvamiseks kaustas /posts/. Meil saadakse järgmine failistruktuur:

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

Nüüd peame saidi layout-is kirjutama spetsiaalse käsu sisestamiseks. Selleks tuleb kasutada spetsiaalset dünaamilist pesa.

Et mõista, mis see on, vaadake kõigepealt meie saidi layout-i funktsiooni parameetrit:

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

Pange tähele, et parameetrina antakse meile objekt, millest me eraldame saidi sisu muutujasse children.

Selles objektis võivad olla ka teised võtmed. Need vastavad nendele kaustadele, mille nimed algavad sümboliga @.

Meie puhul on meil kaust @info, see tähendab, et meil on kättesaadav muutuja info, mis sõltuvalt URL-ist sisaldab ühe komponendi teksti - kas kasutajate või postituste oma. Võtame selle muutuja:

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

Nüüd saame layout-i sees kuvada muutuja info. See koht kuvab sõltuvalt URL-ist ühe meie komponentide teksti:

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>
  );
}