NextJS-ում զուգահեռ երթուղավորում

NextJS-ում կարելի է կարգավորել, որ կայքի մի մասը ցույց տար տարբեր բովանդակություն կախված հարցված URL-ից: Սա կոչվում է զուգահեռ երթուղավորում:

Դիտարկենք օրինակով: Ենթադրենք ունենք հետևյալ կայքի դասավորությունը.

export 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

Այժմ մեզ անհրաժեշտ է կայքի դասավորության մեջ գրել հատուկ հրաման ներդրման համար: Դրա համար անհրաժեշտ է օգտագործել հատուկ դինամիկ սլոտ:

Հասկանալու համար, թե ինչ է սա, նախ նայեք մեր կայքի դասավորության ֆունկցիայի պարամետրին.

export default function RootLayout({children}) {
	return (
		
	);
}

Ուշադրություն դարձրեք, որ պարամետրով մեզ է փոխանցվում օբյեկտ, որից մենք հանում ենք կայքի բովանդակությունը փոփոխականի մեջ children:

Այս օբյեկտում կարող են լինել նաև այլ բանալիներ: Դրանք համապատասխանում են այն պանակներին, որոնց անունը մենք սկսել ենք @-ով:

Մեր դեպքում ունենք @info պանակ, ինչը նշանակում է, որ մեզ համար հասանելի կլինի info փոփոխականը, որը կախված URL-ից կպարունակի մեկը երկու բաղադրիչներից - օգտատերեր կամ գրառումներ: Ստացենք այս փոփոխականը.

export default function RootLayout({children, info}) {
	return (
		
	);
}

Այժմ դասավորության ներսում մենք կարող ենք արտածել info փոփոխականը: Այս տեղում կախված URL-ից կտեղադրվի մեր բաղադրիչներից մեկի տեքստը.

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

Կատարեք դինամիկ սլոտ աջ կողային վահանակի համար:

Կատարեք դինամիկ սլոտ ձախ կողային վահանակի համար: