Rute Indeks di React Router

Pada pelajaran ini, kita akan mempelajari apa itu rute indeks.

Pertama-tama, mari kita perhatikan satu hal. Ketika kita berada di halaman utama, di sebelah kanan kita hanya melihat layar kosong. Itu karena tidak ada satu pun rute turunan yang cocok dengan alamat /, dan kami tidak memberi tahu apa yang harus ditampilkan dalam kasus ini. Dalam situasi seperti ini, untuk tidak menampilkan halaman kosong, kita dapat menerapkan rute indeks - sebuah rute turunan yang tidak memiliki path, dan elemennya ditampilkan di dalam Outlet induk ketika tidak ada satu pun rute turunan yang cocok. Dengan rute seperti ini, kita dapat menempatkan informasi tertentu, atau statistik, atau sesuatu yang serupa. Seperti halnya dengan rute biasa, rute ini dapat digunakan untuk memuat data.

Mari kita buat file index.jsx di folder routes, dan di dalamnya komponen Index:

export default function Index() {
	return (
		<div>
			<p>Hai, React Router!</p>
			<p>Ini adalah aplikasi untuk produk-produk saya :)</p>
		</div>
	);
}

Sekarang mari kita buka main.jsx dan impor komponen kita Index ke sana:

import Index from './routes/index';

Dan sebagai elemen pertama dalam array children tambahkan objek, di mana properti index diatur ke true, dan sebagai elemen untuk ditampilkan akan menjadi komponen kita Index:

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

Ambil aplikasi yang Anda buat di tugas pelajaran sebelumnya. Dengan menggunakan materi pelajaran, tambahkan rute indeks dengan alamat halaman utama yang berisi beberapa teks.