ReactJS - Routing: Panduan Pemula untuk Menavigasi Aplikasi React Anda

Hai sana, para pengembang React masa depan! Hari ini, kita akan memulai perjalanan menarik melalui dunia routing React. Sebagai guru ilmu komputer tetangga Anda, saya di sini untuk mengarahkan Anda melalui konsep penting ini yang akan membawa aplikasi React Anda ke level berikutnya. Jadi, sabungkan seat belt dan mari kita masuk ke dalam!

Apa Itu Routing di React?

Sebelum kita mulai, bayangkan Anda sedang membangun sebuah rumah. Setiap kamar di rumah Anda adalah seperti halaman yang berbeda dalam aplikasi web Anda. Apakah Anda merasa baik jika Anda bisa bergerak antara kamar-kamar ini tanpa perlu membangun rumah Anda sepenuhnya setiap kali? Itu tepat apa yang routing lakukan di React!

Routing memungkinkan kita untuk menciptakan aplikasi single-page dengan beberapa pandangan, memberikan pengguna kemampuan untuk menavigasi antara komponen (atau "halaman") berbeda tanpa memuat ulang seluruh aplikasi. Itu seperti memiliki pintu ajaib yang bisa membawa Anda ke mana saja di rumah Anda secara instan!

Instal React Router

Untuk memulai routing di React, kita perlu menginstal pustaka populer yang disebut React Router. Jangan khawatir; itu mudah seperti roti!

Buka terminal Anda, navigasikan ke direktori proyek React Anda, dan jalankan perintah berikut:

npm install react-router-dom

Perintah ini mengatakan ke npm (Node Package Manager) untuk menginstal paket React Router bagi kita. Setelah itu selesai, kita siap untuk memulai routing!

React Router: Dasar-Dasar

Sekarang kita sudah menginstal React Router, mari belajar bagaimana menggunakannya. Kita akan mulai dengan contoh sederhana dan perlahan-lahan meningkatkan pengetahuan kita.

Langkah 1: Impor komponen yang diperlukan

Pertama, kita perlu mengimpor komponen yang diperlukan dari React Router. Tambahkan baris-baris ini di bagian atas file App.js utama Anda:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

Langkah 2: Setel Router

Berikutnya, kita akan membungkus seluruh aplikasi kita dengan komponen Router. Ini memberitahu React bahwa kita ingin mengaktifkan routing dalam aplikasi kita:

function App() {
return (
<Router>
{/* Konten aplikasi Anda masuk di sini */}
</Router>
);
}

Langkah 3: Definisikan Routes

Sekarang, mari kita definisikan beberapa route. Kita akan membuat tiga komponen sederhana: Home, About, dan Contact.

function Home() {
return <h2>Selamat datang di halaman Home kami!</h2>;
}

function About() {
return <h2>Pengetahuan lebih lanjut tentang kami di halaman About ini.</h2>;
}

function Contact() {
return <h2>Hubungi kami melalui halaman Contact ini.</h2>;
}

Untuk menyetel route bagi komponen ini, kita gunakan komponen Route:

function App() {
return (
<Router>
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}

Ini adalah apa yang terjadi:

• Kata exact memastikan bahwa komponen Home hanya dirender saat path tepat "/".
• Setiap Route komponen menerima prop path (URL) dan prop component (komponen yang akan dirender di path itu).

Langkah 4: Tambahkan Navigasi

Untuk memungkinkan pengguna menavigasi antara route ini, kita akan menggunakan komponen Link:

function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}

Komponen Link adalah seperti tag <a> yang super. Itu memungkinkan navigasi tanpa memuat ulang halaman secara penuh.

Routing Tertanam

Sekarang kita sudah mengenal dasar-dasar, mari tingkatkan dengan routing tertanam. Bayangkan Anda memiliki halaman "Products", dan di dalamnya, Anda ingin menampilkan kategori produk yang berbeda.

Berikut adalah cara kita dapat mengatur routing tertanam:

function Products() {
return (
<div>
<h2>Produk Kami</h2>
<ul>
<li>
<Link to="/products/electronics">Electronics</Link>
</li>
<li>
<Link to="/products/books">Books</Link>
</li>
</ul>

<Route path="/products/electronics" component={Electronics} />
<Route path="/products/books" component={Books} />
</div>
);
}

function Electronics() {
return <h3>Lihat gadget terbaru kami!</h3>;
}

function Books() {
return <h3>telusuri koleksi buku luas kami!</h3>;
}

Dalam contoh ini, komponen Products mengandung route sendiri. Ketika Anda menavigasi ke "/products/electronics", Anda akan melihat baik Products komponen dan Electronics komponen.

Keuntungan React Router

React Router menawarkan beberapa keuntungan yang menjadikannya pilihan populer untuk mengelola routing dalam aplikasi React. Mari kitauraikan mereka:

Keuntungan	Deskripsi
Routing Dinamis	Routes didefinisikan sebagai bagian komposisi aplikasi Anda, bukan di file konfigurasi.
Routes Tertanam	Mudah membuat UI kompleks dengan struktur routing tertanam.
Kontrol History	Menyediakan kontrol halus atas stack riwayat browser.
Code Splitting	Memungkinkan code splitting, meningkatkan kinerja aplikasi.
Routing Declaratif	Definisikan route Anda sebagai komponen React, membuatnya lebih intuitif dan mudah dikelola.

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia routing React. Kita telah menjelajahi instalasi, routing dasar, routing tertanam, dan keuntungan penggunaan React Router. Ingat, seperti semua keterampilan, routing menjadi mudah dengan latihan. Jadi, jangan khawatir untuk mencoba dan membangun aplikasi routed Anda sendiri.

Saat kita selesai, saya teringat seorang murid yang pernah katakan ke saya, "Routing React terasa seperti mencoba menavigasi labirin tanpa kacamata." Tetapi setelah beberapa latihan, murid yang sama kembali dan berkata, "Sekarang itu seperti saya memiliki peta dan lampu sorot!" Saya harap panduan ini telah memberikan Anda peta dan lampu sorot untuk perjalanan routing React Anda.

Terus coding, terus belajar, dan terutama, bersenang-senang membuat aplikasi React yang menakjubkan!

Credits: Image by storyset