Ծալովի դասավորություններ NextJS-ում

Ինչպես գիտեք, /app պանակում /layout.jsx ֆայլում գտնվում է կայքի հիմնական դասավորությունը:

Ցանկության դեպքում, սակայն, ներդրված պանակներում կարելի է ստեղծել սեփական դասավորություններ: Այս դեպքում էջի բովանդակությունը կտեղադրվի նախ ներդրված դասավորության մեջ, ապա ստացված արդյունքը կտեղադրվի հիմնական դասավորության մեջ:

Եկեք փորձենք գործնականում: Ենթադրենք, մեր հիմնական դասավորությունն ունի հետևյալ տեսքը:

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

Եկեք ստեղծենք մեկ այլ, ծալովի դասավորություն /users պանակի բոլոր բովանդակության համար.

export default function UsersLayout({children}) {
	return (
		<div className="info">
			message for all users
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Ինչպես տեսնում եք, այս դասավորությունում մենք չենք նշում էջի հիմնական թեգերը, քանի որ դրանք արդեն առկա են կայքի մեր հիմնական դասավորությունում:

Եկեք նաև ստեղծենք ֆայլ օգտագործողի ցուցադրման բովանդակության համար.

export default function User() {
	return <>
		<h1>User</h1>
		<p>
			user description
		</p>
	</>;
}

Այս մանիպուլյացիաներից հետո մեր ֆայլային կառուցվածքը կունենա հետևյալ տեսքը.

/app/
- layout.jsx
- /users/
  - layout.jsx
  - /show/
    - page.jsx

Այժմ, եթե դիմել համապատասխան URL-ին, NextJS-ը ամեն ինչ կհավաքի միասին և բրաուզերում մենք կստանանք հետևյալ վերջնական HTML կոդը.

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				message for all users
			</div>
			
			<h1>User</h1>
			<p>
				user description
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Կայքում ստեղծեք բաժին օգտագործողների և բաժին գրառումների համար: Յուրաքանչյուր բաժնում ստեղծեք սեփական դասավորություն, որը կժառանգի կայքի հիմնական դասավորությունից: