Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Single Page Application (SPA) adalah situs web atau aplikasi web yang secara dinamis menulis ulang halaman web yang ada dengan informasi baru dari server web.

Dalam aplikasi React, komponen mengambil konten situs dan merendernya menjadi satu file HTML di proyek Anda.

React Router membantu Anda menavigasi ke komponen pilihan Anda dan merendernya dalam file HTML. Untuk menggunakannya, Anda perlu mengetahui cara menyiapkan dan mengintegrasikan React Router dengan aplikasi React Anda.

Cara Memasang React Router

Untuk menginstal React Router ke dalam proyek React Anda menggunakan npm, pengelola paket JavaScript, jalankan perintah berikut di direktori proyek Anda:

npm saya bereaksi-router-dom

Sebagai alternatif, Anda dapat mengunduh paket menggunakan Yarn, pengelola paket yang memungkinkan Anda menginstal paket perpustakaan secara offline.

instagram viewer

Untuk menginstal React Router menggunakan Yarn, jalankan perintah ini:

benang tambahkan react-router-dom@6

Menyiapkan React Router

Untuk mengonfigurasi React Router dan membuatnya tersedia di aplikasi Anda, impor BrowserRouter dari react-router-dom di dalam Anda index.js file, lalu bungkus komponen aplikasi Anda di BrowserRouter elemen:

impor Reaksi dari'reaksi';
impor ReactDOM dari'reaksi-dom/klien'; 
impor Aplikasi dari'./Aplikasi';
impor {BrowserRouter} dari'bereaksi-router-dom';
const root = ReactDOM.createRoot( dokumen.getElementById('akar') );
root.render(


 </BrowserRouter>
);

Membungkus komponen aplikasi di BrowserRouter elemen memberi seluruh aplikasi akses penuh ke kemampuan Router.

Routing ke Komponen Lain

Setelah mengatur Router Anda di aplikasi Anda, Anda harus melanjutkan dan membuat komponen aplikasi Anda, merutekannya, dan merendernya. Kode berikut mengimpor dan membuat komponen bernama "Beranda", "Tentang", dan "Blog". Itu juga mengimpor Rute Dan Rute elemen dari react-router-dom.

Anda akan menentukan Rute Anda di dalam Aplikasi komponen:

impor { Rute, Rute } dari'bereaksi-router-dom';
impor Rumah dari'./Rumah';
impor Tentang dari'./Tentang';
impor Blog dari'./Blog';
fungsiAplikasi() {
kembali (

'/' elemen={ } />
'/tentang' elemen={ } />
'/blog' elemen={ }/>
 </Routes>
 )
}


eksporbawaan Aplikasi;

Itu Aplikasi komponen adalah komponen utama yang merender semua kode yang telah Anda tulis di komponen Anda yang lain.

Itu Rute elemen adalah elemen induk yang membungkus rute individu yang Anda buat di komponen aplikasi Anda. Itu Rute elemen membuat satu rute. Dibutuhkan dua atribut prop: a jalur dan sebuah elemen.

Itu jalur atribut menentukan jalur URL dari komponen yang dimaksud. Rute pertama pada blok kode di atas menggunakan garis miring terbalik (/) sebagai jalurnya. Ini adalah rute khusus yang akan dirender React terlebih dahulu, jadi Rumah komponen merender ketika Anda menjalankan aplikasi Anda. Jangan bingung dengan sistem ini mengimplementasikan rendering bersyarat di React Components Anda. Anda bisa memberikan ini jalur atribut nama apapun yang Anda suka.

Itu elemen atribut mendefinisikan komponen yang Rute akan merender.

Itu tautan komponen adalah komponen React Router yang digunakan untuk menavigasi rute yang berbeda. Komponen ini mengakses berbagai rute yang Anda buat.

Misalnya:

impor { Tautan } dari'bereaksi-router-dom';
fungsiRumah() {
kembali (




'/tentang'>Tentang halaman</Link>
'/blog'>Halaman blog</Link>
Ini adalah Halaman Beranda
 </div>
 )
}


eksporbawaan Rumah;

Itu tautan komponen hampir identik dengan tag jangkar HTML, itu hanya menggunakan atribut bernama "to" bukan "href". Itu tautan komponen menavigasi ke Rute dengan nama jalur yang sesuai sebagai atributnya dan merender komponen Rute.

Perutean Bersarang dan Cara Menerapkannya

React Router mendukung perutean bersarang, memungkinkan Anda menggabungkan beberapa Rute menjadi satu Rute. Ini terutama digunakan ketika ada beberapa kesamaan dalam jalur URL Rute.

Setelah Anda membuat komponen yang ingin Anda rutekan, Anda akan mengembangkan Rute individu untuk masing-masing komponen di aplikasi komponen.

Misalnya:

impor { Rute, Rute } dari'bereaksi-router-dom'; 
impor Artikel dari'./Artikel';
impor Artikel Baru dari'./ArtikelBaru';
impor Artikel Satu dari'./ArticleOne';
fungsiAplikasi() {
kembali (

'/artikel' elemen={ }/>
'/artikel/baru' elemen={ }/>
'/Pasal 1' elemen={ }/>
 </Routes>
 )
}
eksporbawaan Aplikasi;

Blok kode di atas mengimpor dan merutekan komponen yang dibuat Artikel, Artikel Baru, Dan Artikel Satu. Ada beberapa kesamaan jalur URL di antara ketiga rute tersebut.

Itu Artikel Baru Nama jalur rute dimulai sama dengan Artikel Nama jalur rute, dengan tambahan garis miring terbalik (/) dan kata "baru", yaitu (/baru). Satu-satunya perbedaan antara nama jalan dari Artikel Rute dan Artikel Satu Rute adalah garis miring (/1) di akhir Artikel Satu nama jalur komponen.

Anda dapat menyusun tiga Rute daripada membiarkannya dalam kondisi saat ini.

Seperti itu:

impor { Rute, Rute } dari'bereaksi-router-dom';
impor Artikel dari'./Artikel';
impor Artikel Baru dari'./ArtikelBaru';
impor Artikel Satu dari'./ArticleOne';
fungsiAplikasi() {
kembali (

'/artikel'>
 }/>
'/artikel/baru' elemen={ }/>
'/Pasal 1' elemen={ }/>
 </Route>
 </Routes>
 )
}
eksporbawaan Aplikasi;

Anda telah menggabungkan tiga Rute individual menjadi satu Rute elemen. Perhatikan bahwa orang tua Rute elemen hanya memiliki jalur atribut dan no elemen atribut yang mendefinisikan komponen yang akan dirender. Itu indeks atribut pada anak pertama Rute elemen menentukan bahwa ini Rute merender saat Anda menavigasi ke jalur URL induk Rute.

Untuk membuat kode Anda lebih baik dan lebih mudah dipelihara, Anda harus menentukan Rute Anda dalam sebuah komponen dan mengimpornya ke dalam aplikasi komponen untuk digunakan.

Misalnya:

impor { Rute, Rute } dari'bereaksi-router-dom';
impor Artikel dari'./Artikel';
impor Artikel Baru dari'./ArtikelBaru';
impor Artikel Satu dari'./ArticleOne';
fungsiArtikelRute() {
kembali (

 }/>
'/artikel/baru' elemen={ }/>
'/Pasal 1' elemen={ }/>
 </Routes>
 )
}
eksporbawaan ArtikelRute;

Komponen di blok kode di atas berisi Rute bersarang yang sebelumnya ada di komponen aplikasi. Setelah membuat komponen, Anda harus mengimpornya ke aplikasi komponen dan merutekannya menggunakan single Rute elemen.

Misalnya:

impor { Rute, Rute } dari'bereaksi-router-dom';
impor ArtikelRute dari'./ArticleRoutes';
fungsiAplikasi() {
kembali (

'/artikel/*' elemen={ }>
 </Routes>
 )
}
eksporbawaan Aplikasi;

Di final Rute komponen, simbol garis miring terbalik dan tanda bintang yang ditambahkan di akhir nama jalur Rute memastikan bahwa nama jalur sesuai dengan nama jalur apa pun yang dimulai dengan (/artikel).

Masih Ada Lagi untuk Bereaksi Router

Anda sekarang seharusnya sudah terbiasa dengan dasar-dasar cara membuat aplikasi satu halaman di React.js, menggunakan React Router.

Masih banyak lagi fitur yang tersedia di library React Router yang membuat pengalaman developer lebih dinamis saat membangun aplikasi web.