Dodavanje još jedne rute u React Router

Imamo osnovnu rutu koja vodi na početnu stranicu, na kojoj imamo linkove za proizvode. Hajde sada da dodamo još jednu rutu, tako da pri kliku na jedan od linkova prikaže stranica za proizvod, a ne ekran sa greškom.

Za početak hajde da otvorimo našu aplikaciju, koju smo pravili u prethodnim lekcijama i kreiramo u folderu routes fajl product.jsx. Napravićemo u njemu komponent Product:

function Product() {}

export default Product;

Sada kreirajmo unutar Product objekat product, sa svojstvima name, cost i amount, za sada neka to budu neke fiksirane vrednosti:

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

export default Product;

I na stranici proizvoda ćemo prikazati, redom, njegov naziv, cenu i količinu:

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

Obavezno dodajmo import komponente Product u fajl main.jsx:

import Product from './routes/product';

I, konačno, dodajmo još jednu rutu u našu aplikaciju, uradimo to odmah posle osnovne. Kao putanju navedimo 'products/:productId', a kao element za prikaz koristi se komponent Product:

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

A sada pokrenimo aplikaciju, kliknimo na linkove i nađimo se na stranici sa proizvodom (za sada je ista za sve linkove), a ne sa greškom.

Uzmite aplikaciju, koju ste kreirali u zadacima za prethodne lekcije. Koristeći se materijalom lekcije, kreirajte na sličan način fajl student.jsx, neka na stranici studenta bude prikazano ime, prezime, godina upisa i smer. Dodajte novu rutu za stranicu studenta u fajlu main.jsx, postavite vrednost path na 'students/:studentId'. Uverite se da pri kliku na linkove sada dolazite na stranicu studenta.