Adăugarea unui alt rând în React Router

Avem un rând principal care duce la pagina principală, unde avem linkuri pentru produse. Să adăugăm acum un alt rând, astfel încât la click pe unul dintre linkuri să afișăm pagina pentru produs, și nu ecranul de eroare.

Pentru început să deschidem aplicația noastră, pe care am făcut-o în lecțiile anterioare și să creăm în folderul routes fișierul product.jsx. Să facem în el componenta Product:

function Product() {}

export default Product;

Acum să creăm în interiorul Product obiectul product, cu proprietățile name, cost și amount, momentan acestea vor fi niște valori fixe:

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

export default Product;

Și pe pagina produsului vom afișa, respectiv, numele acestuia, prețul și cantitatea:

return (
	<div>
		<h2>Pagina produsului</h2>
		<p>Nume: {product.name}</p>
		<p>Preț: {product.cost}</p>
		<p>Cantitate: {product.amount}</p>
	</div>
);

Desigur să adăugăm importul componentei Product în fișierul main.jsx:

import Product from './routes/product';

Și, în final, să adăugăm un alt rând în aplicația noastră, să facem asta imediat după rândul principal. Ca și cale să specificăm 'products/:productId', iar ca și element pentru afișare avem componenta Product:

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

Și acum pornim aplicația, facem click pe linkuri și ajungem pe pagina cu produsul (momentan ea este aceeași pentru toate linkurile), și nu cu eroare.

Luați aplicația creată de dumneavoastră în sarcinile din lecțiile anterioare. Folosind materialele lecției, creați în mod similar fișierul student.jsx, să fie afișate pe pagina studentului numele, prenumele, anul de admitere și specialitatea. Adăugați un nou rând pentru pagina studentului în fișierul main.jsx, setați valoarea path la 'students/:studentId'. Asigurați-vă că la click pe linkuri ajungeți acum pe pagina studentului.