Додавање још једне руте у React Router

Имамо коренску руту која води на главну страницу, на којој имамо линкове за производе. Хајде сада да додамо још једну руту, тако да при клику на један од линкова буде приказана страница за производ, а не екран са грешком.

За почетак хајде да отворимо нашу апликацију, коју смо правили на претходним часовима и направимо у фасцикли routes фајл product.jsx. Направимо у њему компоненту Product:

function Product() {}

export default Product;

Сада направимо унутар Product објекат product, са својствима name, cost и amount, за сада нека то буду неке фиксне вредности:

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

export default Product;

И на страници производа ћемо исписати, редом, његово име, цену и количину:

return (
	<div>
		<h2>Страница производа</h2>
		<p>Име: {product.name}</p>
		<p>Цена: {product.cost}</p>
		<p>Количина: {product.amount}</p>
	</div>
);

Обавезно додајмо увоз компоненте Product у фајл main.jsx:

import Product from './routes/product';

И, коначно, додајмо још једну руту у нашу апликацију, урадимо то одмах после коренске. Као путању поставимо 'products/:productId', а за елемент за приказ имамо компоненту Product:

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

А сада покрећемо апликацију, клицамо на линкове и налазимо се на страници са производом (за сада је иста за све линкове), а не са грешком.

Узмите апликацију коју сте направили у задацима за претходне часове. Користећи материјал са часа, на сличан начин направите фајл student.jsx, нека на страници студента буде исписано његово име, презиме, година уписа и смер. Додајте нову руту за страницу студента у фајлу main.jsx, поставите вредност path на 'students/:studentId'. Уверите се да при клику на линкове долазите сада на страницу студента.