ინდექსური მარშრუტი React Router-ში

ამ გაკვეთილზე ჩვენ გავიგებთ, რა არის ინდექსური მარშრუტები.

დასაწყისისთვის მოდი, ყურადღება მივაქციოთ ერთ რამეს. როდესაც ჩვენ ვართ მთავარ გვერდზე, მარჯვნივ ჩვენ ვხედავთ უბრალოდ ცარიელ ეკრანს. ეს იმიტომ, რომ არც ერთი შვილობილი მარშრუტი არ შეესაბამება მისამართს /, და რა გამოვიტანოთ ამ შემთხვევაში, ჩვენ არ უთხარით. ასეთ შემთხვევაში, ცარიელი გვერდის არ გამოსატანად, შეგვიძლია გამოვიყენოთ ინდექსური მარშრუტი - ასეთი შვილობილი მარშრუტი, რომელსაც არ აქვს გზა, და მისი ელემენტი გამოიყენება მშობელ Outlet-ში მაშინ, როდესაც არც ერთი შვილობილი მარშრუტი არ შეესაბამება მისამართს. ასეთი მარშრუტების საშუალებით შეგვიძლია განვათავსოთ რაიმე ინფორმაცია, ან სტატისტიკა, ან სხვა მსგავსი რამ. როგორც ჩვეულებრივი მარშრუტების შემთხვევაში, მათი გამოყენება შესაძლებელია მონაცემების ჩასატვირთად.

მოდით, შევქმნათ ფაილი index.jsx routes საქაღალდეში, და მასში კომპონენტი Index:

export default function Index() {
	return (
		<div>
			<p>გამარჯობა, React Router!</p>
			<p>ეს არის აპლიკაცია ჩემი პროდუქტებისთვის :)</p>
		</div>
	);
}

ახლა გადავიდეთ main.jsx-ში და იმპორტირება გავუკეთოთ ჩვენს კომპონენტს Index:

import Index from './routes/index';

და პირველ ელემენტად children მასივში დავამატოთ ობიექტი, სადაც index თვისება არის true, და როგორც ელემენტი გამოსატანად იქნება ჩვენი კომპონენტი Index:

{ index: true, element: <Index /> },

აიღეთ აპლიკაცია, რომელიც თქვენ შექმენით წინა გაკვეთილის დავალებებში. გაკვეთილის მასალების გამოყენებით, დაამატეთ ინდექსური მარშრუტი მთავარი გვერდის მისამართზე რაიმე ტექსტით.