Új útvonal hozzáadása a React Routerhoz

Van egy gyökér útvonalunk, ami a kezdőlapra vezet, ahol termékekre mutató linkek vannak. Most adjunk hozzá egy új útvonalat, hogy amikor rákattintunk az egyik linkre, a termék oldala jelenjen meg, és ne a hibaüzenet képernyője.

Először is nyissuk meg az alkalmazásunkat, amelyet az előző leckéken készítettünk, és hozzunk létre a routes mappában egy product.jsx fájlt. Készítsünk benne egy Product komponenst:

function Product() {}

export default Product;

Most hozzunk létre a Product komponensen belül egy product objektumot, name, cost és amount tulajdonságokkal, egyelőre legyenek ezek rögzített értékek:

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

export default Product;

És a termék oldalán ki fogjuk írni ennek megfelelően a nevét, az árát és a mennyiségét:

return (
	<div>
		<h2>Termék oldal</h2>
		<p>Név: {product.name}</p>
		<p>Ár: {product.cost}</p>
		<p>Mennyiség: {product.amount}</p>
	</div>
);

Ne felejtsük el hozzáadni a Product komponens importját a main.jsx fájlhoz:

import Product from './routes/product';

És végül adjunk hozzá egy új útvonalat az alkalmazásunkhoz, tegyük ezt közvetlenül a gyökér útvonal után. Az útvonalként adjuk meg a 'products/:productId' értéket, a megjelenítendő elem pedig a Product komponens lesz:

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

Most indítsuk el az alkalmazást, kattintsunk a linkekre, és a termék oldalán kötünk ki (egyelőre ez minden link esetén ugyanaz), és nem a hibaoldalon.

Vegyétek elő az előző leckék feladataihoz létrehozott alkalmazástokat. A lecke anyagát használva, hozzatok létre hasonló módon egy student.jsx fájlt, legyen a hallgató oldalán kiírva a neve, vezetékneve, a felvétel éve és a szakja. Adjatok hozzá egy új útvonalat a hallgató oldalához a main.jsx fájlban, állítsátok a path értékét 'students/:studentId'-ra. Győződjetek meg arról, hogy a linkekre kattintva most már a hallgató oldalára kerültök.