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