Parallelle Roeteplan in NextJS

In NextJS kan jy dit so maak dat 'n deel van die webwerf verskillende inhoud vertoon afhangende van die aangevraagde URL. Dit word parallelle roeteplan genoem.

Kom ons kyk na 'n voorbeeld. Laat ons die volgende webwerf-uitleg hê:

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

Laat ons sê ons wil hê dat in die kop daar dinamiese inligting vertoon moet word. Laat by URL /users daar 'n komponent met gebruikers vertoon word, en by URL /posts 'n komponent met plasings.

Vir sulke parallelle roeteplan moet jy 'n spesiale vouer maak, en die naam daarvan moet begin met die simbool @. Vir die voorbeeld noem ons ons vouer @info.

In hierdie vouer plaas ons twee komponente. Die eerste een om gebruikers te wys in die vouer /users/, en die tweede een om plasings te wys in die vouer /posts/. Ons sal die volgende lêerstruktuur hê:

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

Nou moet ons in die webwerf-uitleg 'n spesiale opdrag skryf vir die invoeging. Hiervoor moet jy die spesiale dinamiese gleuf gebruik.

Om te verstaan wat dit is, kyk eers na die parameter van ons webwerf-uitleg funksie:

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

Let op dat die parameter vir ons 'n objek is, waaruit ons die webwerf-inhoud in die veranderlike children onttrek.

In hierdie objek kan daar ander sleutels wees. Hulle stem ooreen met daardie vouers waarvan die naam ons met @ begin het.

In ons geval het ons die vouer @info, en dit beteken dat daar vir ons 'n veranderlike info beskikbaar sal wees, wat, afhangende van die URL, die teks van een van die komponente bevat - gebruikers of plasings. Laat ons hierdie veranderlike verkry:

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

Nou kan ons binne die uitleg van die blad die veranderlike info vertoon. In hierdie plek sal, afhangende van die URL, die teks van een van ons komponente ingevoeg word:

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

Maak 'n dinamiese gleuf vir die regterkant sybalk.

Maak 'n dinamiese gleuf vir die linkerkant sybalk.