Parallel routing in NextJS

In NextJS kan het zo worden gemaakt dat een deel van de site verschillende inhoud toont afhankelijk van de aangevraagde URL. Dit wordt parallel routing genoemd.

Laten we een voorbeeld bekijken. Stel dat we de volgende sitelay-out hebben:

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

Stel dat we in de header dynamische informatie willen tonen. Stel dat op URL /users een component met gebruikers wordt getoond, en op URL /posts een component met posts.

Voor dergelijke parallelle routing moet een speciale map worden gemaakt, waarvan de naam begint met het symbool @. Laten we voor dit voorbeeld onze map @info noemen.

In deze map plaatsen we twee componenten. De eerste voor het tonen van gebruikers in map /users/, en de tweede voor het tonen van posts in map /posts/. We krijgen de volgende bestandsstructuur:

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

Nu moeten we in de sitelay-out een speciale opdracht schrijven voor invoeging. Hiervoor moet een speciale dynamische slot worden gebruikt.

Om te begrijpen wat dit is, kijk eerst naar de parameter van onze sitelay-outfunctie:

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

Let op het feit dat als parameter een object aan ons wordt doorgegeven, waaruit we de site-inhoud halen in de variabele children.

Er kunnen andere sleutels in dit object zitten. Ze komen overeen met die mappen waarvan de naam we zijn begonnen met @.

In ons geval hebben we map @info, wat betekent dat de variabele info beschikbaar zal zijn, afhankelijk van de URL die de tekst van een van de componenten bevat - gebruikers of posts. Laten we deze variabele ophalen:

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

Nu kunnen we binnen de lay-outopmaak de variabele info tonen. Op deze plaats zal, afhankelijk van de URL, de tekst van een van onze componenten worden ingevoegd:

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 een dynamische slot voor de rechter zijbalk.

Maak een dynamische slot voor de linker zijbalk.