Дадаванне яшчэ аднаго маршруту ў 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'. Пераканайцеся, што пры кліку па спасылках вы трапляеце цяпер на староначку студента.