Paralēlais maršrutēšana NextJS

NextJS var izveidot tā, lai daļa vietnes rādītu atšķirīgu saturu atkarībā no pieprasītā URL. To sauc par paralēlo maršrutēšanu.

Apskatīsim to ar piemēru. Pieņemsim, ka mums ir šāds vietnes izkārtojums:

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

Pieņemsim, ka mēs vēlamies, lai headerī tiktu izvadīta dinamiska informācija. Pieņemsim, ka URL /users tiks izvadīts komponents ar lietotājiem, bet URL /posts komponents ar ierakstiem.

Šādai paralēlai maršrutēšanai jāizveido īpaša mape, sākot tās nosaukumu ar simbolu @. Piemēram, nosauksim mūsu mapi par @info.

Šajā mapē ievietosim divus komponentus. Pirmo lietotāju attēlošanai mapē /users/, bet otro ierakstu attēlošanai mapē /posts/. Mēs iegūsim šādu failu struktūru:

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

Tagad mums vietnes izkārtojumā jāuzraksta īpaša komanda ielādei. Lai to izdarītu, jāizmanto īpašs dinamisks slots.

Lai saprastu, kas tas ir, vispirms apskatiet mūsu vietnes izkārtojuma funkcijas parametru:

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

Ievērojiet, ka parametrs mums tiek padots objekts, no kura mēs izvelkam vietnes saturu mainīgajā children.

Šajā objektā var būt arī citas atslēgas. Tās atbilst tām mapēm, kuru nosaukums sākas ar @.

Mūsu gadījumā mums ir mape @info, kas nozīmē, ka mums būs pieejams mainīgais info, kas atkarībā no URL saturēs viena no komponentu tekstu - lietotājus vai ierakstus. Iegūsim šo mainīgo:

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

Tagad izkārtojuma iekšienē mēs varam izvadīt mainīgo info. Šajā vietā atkarībā no URL tiks ievietots viena no mūsu komponentu teksts:

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

Izveidojiet dinamisko slotu labajā sānjoslā.

Izveidojiet dinamisko slotu kreisajā sānjoslā.