Добавяне на още един маршрут в 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>Product page</h2>
		<p>Name: {product.name}</p>
		<p>Cost: {product.cost}</p>
		<p>Amount: {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'. Уверете се, че при кликване върху връзките се попада сега на страницата на студента.