Toinen reitin lisääminen React Routeriin

Meillä on juurireitti, joka johtaa etusivulle, jolla on linkkejä tuotteisiin. Lisätään nyt toinen reitti, jotta kun klikkaamme yhtä linkeistä, näemme tuotesivun virhesivun sijaan.

Aluksi avataan sovelluksemme, jota teimme edellisillä tunneilla ja luodaan kansioon routes tiedosto product.jsx. Tehdään siitä komponentti Product:

function Product() {}

export default Product;

Luodaan nyt Product:n sisälle olio product, ominaisuuksilla name, cost ja amount, toistaiseksi nämä ovat kiinteitä arvoja:

function Product() {
	const product = {
		name: 'Tuote',
		cost: 400,
		amount: 5,
	};
}

export default Product;

Ja tuotesivulla näytämme vastaavasti sen nimen, hinnan ja määrän:

return (
	<div>
		<h2>Tuotesivu</h2>
		<p>Nimi: {product.name}</p>
		<p>Hinta: {product.cost}</p>
		<p>Määrä: {product.amount}</p>
	</div>
);

Lisätään välttämättä Product-komponentin importti tiedostoon main.jsx:

import Product from './routes/product';

Ja lopuksi lisätään toinen reitti sovellukseemme, tehdään se heti juurireitin jälkeen. Poluksi aseta 'products/:productId', ja elementiksi näytettäväksi on Product-komponentti:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

Ja nyt käynnistetään sovellus, klikataan linkkejä ja päädymme tuotesivulle (toistaiseksi se on sama kaikille linkeille), eikä virhesivulle.

Ota sovellus, jonka loit edellisten tunttien tehtäviin. Käytä oppitunnin materiaaleja, luo samalla tavalla tiedosto student.jsx, opiskelijasivulla näytetään hänen etunimensä, sukunimi, pääsymisvuosi ja pääaine. Lisää uusi reitti opiskelijasivulle tiedostoon main.jsx, aseta path:n arvoksi 'students/:studentId'. Varmista, että linkkejä klikkaamalla pääset nyt opiskelijasivulle.