Dodawanie kolejnej trasy w React Router

Mamy trasę główną, prowadzącą do strony głównej, na której mamy linki do produktów. Dodajmy teraz kolejną trasę, aby po kliknięciu w jeden z linków wyświetlała się strona produktu, a nie ekran błędu.

Na początek otwórzmy naszą aplikację, którą tworzyliśmy na poprzednich lekcjach i utwórzmy w folderze routes plik product.jsx. Stwórzmy w nim komponent Product:

function Product() {}

export default Product;

Teraz utwórzmy wewnątrz Product obiekt product, z właściwościami name, cost i amount, na razie będą to jakieś ustalone wartości:

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

export default Product;

Na stronie produktu będziemy wyświetlać, odpowiednio, jego nazwę, koszt i ilość:

return (
	<div>
		<h2>Strona produktu</h2>
		<p>Nazwa: {product.name}</p>
		<p>Koszt: {product.cost}</p>
		<p>Ilość: {product.amount}</p>
	</div>
);

Pamiętajmy, aby dodać import komponentu Product do pliku main.jsx:

import Product from './routes/product';

I wreszcie, dodajmy kolejną trasę do naszej aplikacji, zróbmy to od razu po głównej. Jako ścieżkę podajmy 'products/:productId', a jako element do wyświetlenia niech będzie komponent Product:

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

A teraz uruchamiamy aplikację, klikamy w linki i trafiamy na stronę produktu (na razie jest ona taka sama dla wszystkich linków), a nie na stronę błędu.

Weź aplikację, którą stworzyłeś/aś w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, utwórz w podobny sposób plik student.jsx, niech na stronie studenta wyświetla się jego imię, nazwisko, rok przyjęcia i kierunek. Dodaj nową trasę dla strony studenta w pliku main.jsx, ustaw wartość path na 'students/:studentId'. Upewnij się, że po kliknięciu w linki trafiasz teraz na stronę studenta.