Rinnakkaisreititys NextJS:ssä

NextJS:ssä voidaan tehdä niin, että osa sivustosta näyttää eri sisältöä riippuen pyydetystä URL-osoitteesta. Tätä kutsutaan rinnakkaiseksi reititykseksi.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on seuraava sivuston layout:

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

Oletetaan, että haluamme headeriin dynaamista tietoa. URL-osoitteessa /users tulostetaan komponentti käyttäjillä, ja URL-osoitteessa /posts komponentti postauksilla.

Tällaista rinnakkaista reititystä varten on tehtävä erityinen kansio, jonka nimi alkaa merkillä @. Esimerkiksi nimetään kansiomme @info.

Tähän kansioon sijoitamme kaksi komponenttia. Ensimmäinen käyttäjien näyttämiseen kansiossa /users/, ja toinen postausten näyttämiseen kansiossa /posts/. Saamme seuraavan tiedostorakenteen:

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

Nyt meidän on layoutissa kirjoitettava erityiskomento lisäystä varten. Tätä varten on käytettävä erityistä dynaamista slottia.

Ymmärtääksesi mitä tämä on, katso ensin layout-funktiomme parametria:

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

Huomaa, että parametrina meille välitetään objekti, josta poimimme sivuston sisällön muuttujaan children.

Tässä objektissa voi olla myös muita avaimia. Ne vastaavat kansioita, joiden nimi on alkanut merkillä @.

Meidän tapauksessamme meillä on kansio @info, mikä tarkoittaa, että meillä on käytettävissä muuttuja info, joka URL-osoitteesta riippuen sisältää tekstin jommastakummasta komponentista - käyttäjät tai postaukset. Haetaan tämä muuttuja:

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

Nyt layoutin merkintäkielessä voimme tulostaa muuttujan info. Tähän kohtaan URL-osoitteesta riippuen lisätään teksti jostakin komponenteistamme:

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

Tee dynaaminen slot oikeaan sivupalkkiin.

Tee dynaaminen slot vasempaan sivupalkkiin.