Paralleelne ruutimine NextJS-is

NextJS-is on võimalik teha nii, et osa veebisaidist kuvab erinevat sisu sõltuvalt taotletud URL-ist. Seda nimetatakse paralleelseks ruutimiseks.

Vaatame näidet. Oletame, et meil on järgmine veebisaidi layout:

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

Oletame, et tahame, et päises kuvataks dünaamilist teavet. Oletame, et URL-il /users kuvatakse komponent kasutajatega, ja URL-il /posts komponent postitustega.

Sellise paralleelse ruutimise jaoks peame looma spetsiaalse kausta, alustades selle nime sümboliga @. Näiteks nimetame oma kausta @info.

Selles kaustas paigutame kaks komponenti. Esimene kasutajate kuvamiseks kaustas /users/, ja teine postituste kuvamiseks kaustas /posts/. Meil saadakse järgmine failistruktuur:

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

Nüüd peame saidi layout-is kirjutama spetsiaalse käsu sisestamiseks. Selleks tuleb kasutada spetsiaalset dünaamilist pesa.

Et mõista, mis see on, vaadake kõigepealt meie saidi layout-i funktsiooni parameetrit:

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

Pange tähele, et parameetrina antakse meile objekt, millest me eraldame saidi sisu muutujasse children.

Selles objektis võivad olla ka teised võtmed. Need vastavad nendele kaustadele, mille nimed algavad sümboliga @.

Meie puhul on meil kaust @info, see tähendab, et meil on kättesaadav muutuja info, mis sõltuvalt URL-ist sisaldab ühe komponendi teksti - kas kasutajate või postituste oma. Võtame selle muutuja:

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

Nüüd saame layout-i sees kuvada muutuja info. See koht kuvab sõltuvalt URL-ist ühe meie komponentide teksti:

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

Tehke dünaamiline pesa parempoolse külgriba jaoks.

Tehke dünaamiline pesa vasakpoolse külgriba jaoks.