React Router-да яна маршрут қўшиш

Бизда бош саҳифага олиб борадиган режа маршрути мавжуд, унда маҳсулотлар учун ҳаволалар бор. Энди битта ҳаволани босганда хатолик саҳифаси ўрнига маҳсулот учун саҳифа кўрсатилиши учун яна бир маршрут қўшайлик.

Бошлаш учун ўтган дарсларда яратган иловамизни очиб, routes папкасида product.jsx файлини яратамиз. Унда Product компонентини яратамиз:

function Product() {}

export default Product;

Энди Product ичида name, cost ва amount хоссалари билан product объектини яратамиз, ҳозирча булар бирор фиксирован қийматлар бўлади:

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' қилиб белгиланг. Ҳаволаларни босганда энди талаба саҳифасига тушаётганингизга ишонч ҳосил қилинг.