კიდევ ერთი მარშრუტის დამატება 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, დაე, სტუდენტის გვერდზე გამოჩნდეს მისი სახელი, გვარი, ჩარიცხვის წელი და სპეციალობა. დაუმატეთ ახალი მარშრუტი სტუდენტის გვერდისთვის ფაილში main.jsx, დააყენეთ path-ის მნიშვნელობა 'students/:studentId'. დარწმუნდით, რომ ბმულებზე დაწკაპუნებისას თქვენ მოხვდებით ახლა სტუდენტის გვერდზე.