Lygiagretusis maršruto nustatymas NextJS

NextJS leidžia pasiekti, kad tinklapio dalis rodytų skirtingą turinį priklausomai nuo užklausto URL. Tai vadinama lygiagrečiuoju maršruto nustatymu.

Pažiūrėkime pavyzdžiu. Tarkime, kad turime tokį tinklapio išdėstymą:

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

Tarkime, kad norime, kad antraštėje būtų rodoma dinaminė informacija. Tegul URL /users rodo komponentą su vartotojais, o URL /posts komponentą su įrašais.

Tokiam lygiagrečiajam maršruto nustatymui reikia sukurti specialų aplanką, kurio pavadinimas prasideda simboliu @. Pavyzdžiui, pavadinkime mūsų aplanką @info.

Šiame aplanke talpinsime du komponentus. Pirmasis vartotojų rodymui aplanke /users/, o antrasis įrašų rodymui aplanke /posts/. Gausime tokią failų struktūrą:

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

Dabar tinklapio išdėstyme turime parašyti specialią įterpimo komandą. Tam reikia naudoti specialųjį dinaminį lizdą.

Kad suprastumėte, kas tai yra, pirmiausia pažiūrėkite į mūsų tinklapio išdėstymo funkcijos parametrą:

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

Atkreipkite dėmesį, kad parametru mums perduodamas objektas, iš kurio mes ištraukiame tinklapio turinį į kintamąjį children.

Šiame objekte gali būti ir kitų raktų. Jie atitinka tuos aplankus, kurių pavadinimus pradėjome su @.

Mūsų atveju turime aplanką @info, o tai reiškia, kad mums bus prieinamas kintamasis info, priklausomai nuo URL talpinantis vieno iš komponentų tekstą - vartotojus arba įrašus. Gaukime šį kintamąjį:

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

Dabar išdėstymo viduje galime atvaizduoti kintamąjį info. Į šią vietą priklausomai nuo URL ir bus įterpiamas vieno iš mūsų komponentų tekstas:

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

Sukurkite dinaminį lizdą dešiniajai šoninei juostai.

Sukurkite dinaminį lizdą kairiajai šoninei juostai.