React Router-da yana bir marshrut qo'shish

Bizda asosiy sahifaga olib boradigan ildiz marshruti mavjud, unda mahsulotlar uchun havolalar bor. Keling, endi yana bir marshrut qo'shamiz, shunda havolalarning birini bosganimizda, xato sahifasi o'rniga mahsulot uchun sahifa ko'rsatilsin.

Boshlash uchun oldingi darslarda yaratgan ilovamizni ochamiz va routes papkasida product.jsx faylini yaratamiz. Unda Product komponentini yaratamiz:

function Product() {}

export default Product;

Endi Product ichida product obyektini yaratamiz, uning name, cost va amount xususiyatlari bo'lsin, hozircha bu ma'lum bir belgilangan qiymatlar bo'lsin:

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

export default Product;

Va mahsulot sahifasida biz, mos ravishda, uning nomi, narxi va miqdorini chiqaramiz:

return (
	<div>
		<h2>Mahsulot sahifasi</h2>
		<p>Nomi: {product.name}</p>
		<p>Narxi: {product.cost}</p>
		<p>Miqdori: {product.amount}</p>
	</div>
);

Albatta, Product komponentini main.jsx fayliga import qilamiz:

import Product from './routes/product';

Va nihoyat, ilovamizga yana bir marshrut qo'shamiz, buni ildiz marshrutidan keyin darhol qilamiz. Yo'l sifatida 'products/:productId' ni ko'rsatamiz, va ko'rsatish uchun element sifatida Product komponenti ishlaydi:

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

Endi ilovani ishga tushiramiz, havolalarni bosamiz va mahsulot sahifasiga o'tamiz (hozircha u barcha havolalar uchun bir xil), xato sahifasiga o'tmasdan.

Oldingi darslar uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, xuddi shunday tarzda student.jsx faylini yarating, talaba sahifasida uning ismi, familiyasi, o'qishga kirgan yili va mutaxassisligi chiqsin. main.jsx faylida talaba sahifasi uchun yangi marshrut qo'shing, path qiymatini 'students/:studentId' ga o'rnating. Havolalarni bosganingizda endi talaba sahifasiga o'tishingizga ishonch hosil qiling.