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>Өнім беті</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' деп орнатыңыз. Сілтемелерді басқанда енді студент бетішісіне түсетініңізге көз жеткізіңіз.