Паралелни рутинг у НектЈС-у

У НектЈС-у је могуће направити да део сајта приказује различит садржај у зависности од траженог УРЛ-а. Ово се зове паралелни рутинг.

Погледајмо на примеру. Претпоставимо да имамо следећи распоред сајта:

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

Претпоставимо да желимо да се у хедеру приказују динамичке информације. Нека за УРЛ /users буде приказан компонент са корисницима, а за УРЛ /posts компонент са објавама.

За такав паралелни рутинг потребно је направити посебну фасциклу, која почиње симболом @. За пример, назовимо нашу фасциклу @info.

У овој фасцикли сместићемо два компонента. Први за приказ корисника у фасцикли /users/, а други за приказ објава у фасцикли /posts/. Добићемо следећу структуру фајлова:

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

Сада нам у распореду сајта треба написати посебну команду за уметање. За ово је потребно користити посебан динамички слот.

Да бисте разумели шта је то, погледајте прво параметар функције нашег распореда сајта:

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

Обратите пажњу да нам се као параметар прослеђује објекат, из кога извлачимо садржај сајта у променљиву children.

У овом објекту могу бити и други кључеви. Они одговарају оним фасциклама чије је име започели са @.

У нашем случају имамо фасциклу @info, што значи да ће нам бити доступна променљива info, која у зависности од УРЛ-а садржи текст једног од компонената - кориснике или објаве. Добијмо ту променљиву:

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

Сада унутар изгледа распореда можемо приказати променљиву info. На ово место ће у зависности од УРЛ-а бити уметан текст једног од наших компонената:

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