Uwendeshaji Njia Sambamba katika NextJS

Katika NextJS inawezekana kufanya sehemu ya tovuti ionyeshe yaliyomo tofauti kulingana na URL iliyoombwa. Hii inaitwa ufuatiliaji njia sambamba.

Hebu tuangalie kwa mfano. Tuchukulie tuna mpangilio ufuatao wa tovuti:

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

Tuchukulie tunataka, kwenye kichwa ionekoe taarifa zenye nguvu. Tuchukulie kwa URL /users itaonyesha kipengele na watumiaji, na kwa URL /posts kipengele na machapisho.

Kwa ufuatiliaji njia sambamba kama huu inahitajika kutengeneza folda maalum, ukianzisha jina lake kwa herufi @. Kwa mfano tuite folda yetu @info.

Katika folda hii tunaweka vipengele viwili. Cha kwanza kuonyesha watumiaji kwenye folda /users/, na cha pili kuonyesha machapisho kwenye folda /posts/. Muundo wetu wa faili utakuwa kama ufuatao:

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

Sasa inatubidi kwenye mpangilio wa tovuti tuandike amri maalum ya kuingiza. Kwa hili inahitajika kutumia sehemu yenye nguvu maalum.

Ili kuelewa ni nini, kwanza angalia kigezo cha kazi ya mpangilio wetu wa tovuti:

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

Zingatia kwamba kigezo kinapeanwa kitu, ambacho tunakitoa yaliyomo ya tovuti kwenye kutofautisha children.

Katika kitu hiki kunaweza kuwa na funguo zingine. Zinalingana na folda zile, ambazo jina lake tumeanza na @.

Katika kesi yetu tuna folda @info, na hii inamaanisha kwamba tutaweza kupata kutofautisha info, kulingana na URL inayobeba maandishi ya moja ya vipengele - watumiaji au machapisho. Tupate kutofautisha huu:

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

Sasa ndani ya muundo wa mpangilio tunaweza kuonyesha kutofautisha info. Hapa ndipo kulingana na URL kutaingizwa maandishi ya moja ya vipengele vyetu:

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

Tengeneza sehemu yenye nguvu kwa upande wa kulia wa sidebar.

Tengeneza sehemu yenye nguvu kwa upande wa kushoto wa sidebar.