Ուրիշ երթուղի ավելացնել 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 ֆայլը, թող ուսանողի էջում արտահանվի նրա անունը, ազգանունը, ընդունման տարեթիվը և mհատուկությունը: Ավելացրեք նոր երթուղի ուսանողի էջի համար main.jsx ֆայլում, սահմանեք path-ի արժեքը 'students/:studentId': Համոզվեք, որ հղումների վրա կտտացնելիս հայտնվում եք հիմա ուսանողի էջում: