தளம் என்பது பல பக்கங்களைச் சுற்றியுள்ள பகிரப்பட்ட UI ஆகும் மற்றும் வழிசெலுத்தல் முழுவதும் நீடிக்கும் — நீங்கள் குழந்தை வழிகளுக்கு இடையில் நகரும்போது அது மீண்டும் செய்யப்படாது அல்லது நிலையை இழக்காது. நீங்கள் layout.tsx கோப்புடன் ஒன்றை வரையறை செய்கிறீர்கள்.
() {
(
);
}
ஒவ்வொரு App Router பயன்பாட்டிலும் ஒரு ரூட் தளம் இருக்க வேண்டும் — இது பழைய _app.tsx/_document.tsx ஐ மாற்றுகிறது।
தளங்கள் கோப்புக்கூட கட்டமைப்பின் மீது உள்ளமைக்கப்பட்டுள்ளன, எனவே ஒவ்வொரு பிரிவும் அதன் சொந்த நிரந்தர மடக்கொலி சேர்க்க முடியும்:
app/layout.tsx → wraps everything (header/footer)
app/dashboard/layout.tsx → wraps all /dashboard/* pages (adds a sidebar)
app/dashboard/settings/page.tsx → rendered inside BOTH layouts
// app/dashboard/layout.tsx — only wraps dashboard routes
export default function DashboardLayout({ children }) {
return (
<div className="flex">
<Sidebar /> {/* stays mounted as you move within /dashboard */}
<main>{children}</main>
</div>
);
}
நீங்கள் /dashboard/settings இலிருந்து /dashboard/billing க்கு வழிசெலுத்தும்போது, Dashboard தளம் (மற்றும் அதன் <Sidebar>) நிறுவப்பட்ட நிலையில் இருக்கும் — அதன் நிலை (ஸ்க্রோல் நிலை, திறந்த மெனு, படிவ உள்ளீடு) பாதுகாக்கப்படுகிறது, மற்றும் பக்க உள்ளடக்கம் மாற்றுகிறது. இது மிகவும் திறமையான மற்றும் முழு ஷெல்லை மீண்டும் செய்ததை விட மிகவும் மசৃண UX ஐ தருகிறது।
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
நீங்கள் விரும்புகிறீர்கள் மடக்கொலி ஒவ்வொரு வழிசெலுத்தலுக்கும் மீட்டமைக்க வேண்டிய அரிய சந்தர்பத்தில் layout.tsx க்கு பதிலாக template.tsx ஐ பயன்படுத்தவும்।
தளங்கள் App Router எவ்வாறு பகிரப்பட்ட, நிரந்தர UI (தலைப்புகள், பக்க பட்டிகள், நாவ்) வழிகளின் மரத்தின் যেকோনো நிலায় மாதிரி செய்கிறது.
வழிசெலுத்தல் முழுவதும் அவற்றின் நிலைத்தன்மை — நிலையைப் பாதுகாப்பது மற்றும் ஷெல்லை மீண்டும் செய்வதைத் தவிர்ப்பது — App Router இன் முக்கிய நன்மையாகும், மற்றும் உள்ளமைக்கப்பட்ட தளங்கள் ஒவ்வொரு பிரிவையும் தனது சொந்த கட்டமைப்பைச் சுத்தமாக রচிக்க அனுமதிக்கும்.