Přidání další trasy do React Router

Máme kořenovou trasu vedoucí na hlavní stránku, na které máme odkazy na produkty. Pojďme nyní přidat další trasu, aby při kliknutí na jeden z odkazů zobrazovala stránka produktu, a ne obrazovku s chybou.

Pro začátek otevřeme naši aplikaci, kterou jsme vytvářeli v předchozích lekcích a vytvořme ve složce routes soubor product.jsx. Vytvořme v něm komponentu Product:

function Product() {}

export default Product;

Nyní vytvoříme uvnitř Product objekt product, s vlastnostmi name, cost a amount, prozatím to budou nějaké pevné hodnoty:

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

export default Product;

A na stránce produktu budeme zobrazovat, odpovídajícím způsobem, jeho název, cenu a množství:

return (
	<div>
		<h2>Stránka produktu</h2>
		<p>Název: {product.name}</p>
		<p>Cena: {product.cost}</p>
		<p>Množství: {product.amount}</p>
	</div>
);

Nezapomeňme přidat import komponenty Product do souboru main.jsx:

import Product from './routes/product';

A konečně, přidejme další trasu do naší aplikace, udělejme to ihned po kořenové. Jako cestu uvedeme 'products/:productId', a jako element pro zobrazení u nás vystupuje komponenta Product:

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

A nyní spustíme aplikaci, klikneme na odkazy a ocitneme se na stránce s produktem (prozatím je u nás stejná pro všechny odkazy), a ne s chybou.

Vezměte aplikaci, kterou jste vytvořili v úkolech k předchozím lekcím. Použijte materiály lekce, vytvořte podobným způsobem soubor student.jsx, ať na stránce studenta je zobrazeno jeho jméno, příjmení, rok nástupu a obor. Přidejte novou trasu pro stránku studenta do souboru main.jsx, nastavte hodnotu path na 'students/:studentId'. Ujistěte se, že při kliknutí na odkaz se dostanete nyní na stránku studenta.