Pridanie ďalšej trasy v React Router

Máme koreňovú trasu, ktorá vedie na domovskú stránku, kde máme odkazy na produkty. Poďme teraz pridať ďalšiu trasu, aby sa pri kliknutí na jeden z odkazov zobrazila stránka produktu, a nie obrazovka s chybou.

Na začiatok otvorme našu aplikáciu, ktorú sme robili v predchádzajúcich lekciách a vytvorme v priečinku routes súbor product.jsx. Vytvorme v ňom komponent Product:

function Product() {}

export default Product;

Teraz vytvorme vnútri Product objekt product, s vlastnosťami name, cost a amount, zatiaľ to budú nejaké pevne nastavené hodnoty:

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

export default Product;

A na stránke produktu budeme zobrazovať, zodpovedajúcim spôsobom, jeho názov, cenu a množstvo:

return (
	<div>
		<h2>Product page</h2>
		<p>Name: {product.name}</p>
		<p>Cost: {product.cost}</p>
		<p>Amount: {product.amount}</p>
	</div>
);

Nezabudnime pridať import komponentu Product do súboru main.jsx:

import Product from './routes/product';

A nakoniec, pridajme ďalšiu trasu do našej aplikácie, urobme to hneď po koreňovej. Ako cestu zadajme 'products/:productId', a ako element na zobrazenie nám slúži komponent Product:

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

A teraz spustíme aplikáciu, klikáme na odkazy a ocitneme sa na stránke s produktom (zatiaľ je rovnaká pre všetky odkazy), a nie s chybou.

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Použite materiály z lekcie a vytvorte podobným spôsobom súbor student.jsx, nech sa na stránke študenta zobrazuje jeho meno, priezvisko, rok nástupu a špecializácia. Pridajte novú trasu pre stránku študenta do súboru main.jsx, nastavte hodnotu path na 'students/:studentId'. Uistite sa, že pri kliknutí na odkaz sa dostanete teraz na stránku študenta.