React Router-da əlavə marşrutun əlavə edilməsi

Bizim əsas səhifəyə aparan kök marşrutumuz var, hansı ki, məhsullar üçün keçidlərə malikdir. Gəlin indi əlavə bir marşrut əlavə edək ki, keçidlərdən birinə kliklədikdə bizə səhv ekranı yox, məhsul üçün səhifə göstərilsin.

Əvvəlcə gəlin əvvəlki dərslərdə etdiyimiz tətbiqimizi açaq və routes qovluğunda product.jsx faylı yaradaq. Orada Product komponentini edək:

function Product() {}

export default Product;

İndi Product daxilində product obyektini yaradaq, name, cost və amount xüsusiyyətləri ilə, hələlik bunlar bəzi müəyyən edilmiş dəyərlər olacaq:

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

export default Product;

Və məhsul səhifəsində biz müvafiq olaraq onun adını, qiymətini və miqdarını çıxardacağıq:

return (
	<div>
		<h2>Məhsul səhifəsi</h2>
		<p>Ad: {product.name}</p>
		<p>Qiymət: {product.cost}</p>
		<p>Miqdar: {product.amount}</p>
	</div>
);

Mütləq Product komponentinin importunu main.jsx faylına əlavə edək:

import Product from './routes/product';

Və nəhayət, tətbiqimizə əlavə bir marşrut əlavə edək, bunu kökdən dərhal sonra edək. Yol kimi 'products/:productId' göstərək, göstərilməsi üçün element isə Product komponentidir:

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

İndi isə tətbiqi işə salaq, keçidlərə klikləyək və məhsul səhifəsində olduğumuzu görək (hələlik o, bizim üçün bütün keçidlərdə eynidir), səhv ilə deyil.

Əvvəlki dərslərin tapşırıqlarında yaratdığınız tətbiqi götürün. Dərs materiallarından istifadə edərək, oxşar şəkildə student.jsx faylı yaradın, tələbə səhifəsində onun adı, soyadı, qəbul ili və ixtisası çıxarılsın. main.jsx faylında tələbə səhifəsi üçün yeni marşrut əlavə edin, path dəyərini 'students/:studentId' təyin edin. Əmin olun ki, keçidləri kliklədikdə artıq tələbə səhifəsinə düşürsünüz.