React Router'га кошумча маршрут кошуу

Бизде негизги баракчага алып барган тамыр маршрут бар, анда продуктулар үчүн шилтемелер бар. Келгиле, азыр дагы бир маршрут кошобуз, шилтеменин бирине чыкылдаганда, ката экраны эмес, продукт үчүн баракча көрсөтүлсүн.

Башында, мурунку сабактарда жасаган колдонмобузду ачып, routes папкасында product.jsx файлын түзөлү. Анда Product компонентин жасайбыз:

function Product() {}

export default Product;

Азыр Productтин ичинде product объектин түзөбүз, name, cost жана amount касиеттери менен, азыркы учурда алар бир нече белгиленген маанилер болсун:

function Product() {
	const product = {
		name: 'Продукт',
		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' кылып белгилеңиз. Шилтемелерге чыкылдаганда студент баракчасына түшөрүңүздү текшериңиз.