React Router-a täze ýol goşulmasy

Bizde esas sahypa bar, ol ýere getirýän kök ýol bar we şol sahypada önümler üçin çykgytlar bar. Indi ýene bir ýol goşalyň, şeýlelikde bir çykgydy basanymyzda, ýalňyşlyk ekrany däl-de, önüm üçin sahypa görkezilsin.

Başlangyçda, öňki sapaklarda ýasap geçen programmanymyzy açalyň we routes papkasynyň içinde product.jsx faýlyny dörediň. Ol ýerde Product komponentini ýasalyň:

function Product() {}

export default Product;

Indi Product-iň içinde product obýektini dörediň, onuň name, cost we amount aýratynlyklary bilen, häzirki wagtda bu belli bir belgilenen bahalar bolsun:

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

export default Product;

Biz önüm sahypasynda degişlilikde, onuň adyny, bahasyny we sanyny görkezeris:

return (
	<div>
		<h2>Product page</h2>
		<p>Name: {product.name}</p>
		<p>Cost: {product.cost}</p>
		<p>Amount: {product.amount}</p>
	</div>
);

Product komponentini main.jsx faýlyna import etmegi unutmaň:

import Product from './routes/product';

We, soňunda, programmanymyza ýene bir ýol goşalyň, muny kök ýoldan soňra derrew edeliň. Ýol hökmünde 'products/:productId' görkezeliň, görkezmek üçin element hökmünde bizde Product komponenti işleýär:

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

Indi programmany işledip başlaň, çykgytlara basyň we önüm sahypasynda bolýarys (häzirki wagtda ol biziň ähli çykgytlar üçin birmeňzeş), ýalňyşlyk ekranynda däl.

Öňki sapaklardaky wezipelerde ýasap geçen programmanyňyzy alyň. Sapagyň materiallaryny ulanyp, şuňa meňzeş student.jsx faýlyny dörediň, talybyň sahypasynda onuň ady, familiýasy, okuwa giren ýyly we hünäri görkezilsin. main.jsx faýlyna talybyň sahypasy üçin täze ýol goşuň, path-iň bahasyny 'students/:studentId' ediň. Çykgytlara basanyňyzda häzir talybyň sahypasyna barýandygyňyzy anyklaň.