Laluan Indeks dalam React Router

Dalam pelajaran ini, kita akan belajar apa itu laluan indeks.

Pertama, mari kita perhatikan satu perkara. Apabila kita berada di halaman utama, di sebelah kanan kita hanya melihat skrin kosong. Ini kerana tiada satu pun laluan anak yang sepadan dengan alamat /, dan kami tidak memberitahu apa yang perlu ditunjukkan dalam kes ini. Dalam situasi sedemikian, untuk mengelakkan menunjukkan halaman kosong, kita boleh menggunakan laluan indeks - ialah laluan anak yang tidak mempunyai path, dan elemennya dipaparkan dalam Outlet induk apabila tiada satu pun daripada set laluan anak yang sepadan. Dengan menggunakan laluan sedemikian, kita boleh meletakkan sebarang maklumat, atau statistik, atau perkara lain yang serupa. Seperti dalam kes laluan biasa, ia boleh digunakan untuk memuatkan data.

Mari kita buat fail index.jsx dalam folder routes, dan dalamnya komponen Index:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>Hi, React Router!</p>
      <p>This is an application for my products :)</p>
    </div>
  );
}

Sekarang mari kita pergi ke main.jsx dan import komponen Index kami ke sana:

main.jsximport Index from './routes/index';

Dan sebagai elemen pertama dalam array children tambahkan objek di mana sifat index disetkan kepada true, dan sebagai elemen untuk dipaparkan akan menjadi komponen kami Index:

main.jsx{ index: true, element: <Index /> },