Паралелни рутинг у НектЈС-у

У НектЈС-у је могуће направити да део сајта приказује различит садржај у зависности од траженог УРЛ-а. Ово се зове паралелни рутинг.

Погледајмо на примеру. Претпоставимо да имамо следећи распоред сајта:

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

Претпоставимо да желимо да се у хедеру приказују динамичке информације. Нека за УРЛ /users буде приказан компонент са корисницима, а за УРЛ /posts компонент са објавама.

За такав паралелни рутинг потребно је направити посебну фасциклу, која почиње симболом @. За пример, назовимо нашу фасциклу @info.

У овој фасцикли сместићемо два компонента. Први за приказ корисника у фасцикли /users/, а други за приказ објава у фасцикли /posts/. Добићемо следећу структуру фајлова:

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

Сада нам у распореду сајта треба написати посебну команду за уметање. За ово је потребно користити посебан динамички слот.

Да бисте разумели шта је то, погледајте прво параметар функције нашег распореда сајта:

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

Обратите пажњу да нам се као параметар прослеђује објекат, из кога извлачимо садржај сајта у променљиву children.

У овом објекту могу бити и други кључеви. Они одговарају оним фасциклама чије је име започели са @.

У нашем случају имамо фасциклу @info, што значи да ће нам бити доступна променљива info, која у зависности од УРЛ-а садржи текст једног од компонената - кориснике или објаве. Добијмо ту променљиву:

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

Сада унутар изгледа распореда можемо приказати променљиву info. На ово место ће у зависности од УРЛ-а бити уметан текст једног од наших компонената:

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

Направите динамички слот за десну бочну траку.

Направите динамички слот за леву бочну траку.