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

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

За почеток, ајде да ја отвориме нашата апликација, која ја правевме во претходните лекции и да креираме во папката 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 />,
},

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

Земете ја апликацијата, создадена од вас во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, креирајте на сличен начин датотека student.jsx, нека на страницата на студентот се прикажува неговото име, презиме, година на упис и специјалност. Додадете нова рута за страницата на студентот во датотеката main.jsx, поставете ја вредноста path на 'students/:studentId'. Проверете, дали при клик на линковите се наоѓате сега на страницата на студентот.