Panduan untuk Pemula: Menggunakan Routing di ReactJS

Halo sana, para pengembang React masa depan! Hari ini, kita akan mengemban perjalanan menarik melalui dunia routing React. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengarahkan Anda melalui konsep penting ini yang akan membawa aplikasi React Anda ke tingkat berikutnya. Jadi, sabungkan sepatu Anda dan mari kita masuk ke dalam!

Apa Itu Routing di React?

Sebelum kita mulai, mari kita bayangkan Anda sedang membangun sebuah rumah. Setiap kamar di rumah Anda seperti halnya halaman yang berbeda dalam aplikasi web Anda. Apakah Anda tidak merasa senang jika Anda dapat bergerak antara kamar-kamar ini tanpa perlu membangun rumah secara keseluruhan setiap kali? Itu tepat apa yang routing lakukan di React!

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

Instalasi React Router

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

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 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 secara bertahap 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: Mengatur 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 disini */}
</Router>
);
}

Langkah 3: Definisikan Routes

Sekarang, mari kita tentukan beberapa rute. Kita akan menciptakan tiga komponen sederhana: Home, About, dan Contact.

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

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

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

Untuk mengatur rute 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>
);
}

Berikut apa yang terjadi:

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

Langkah 4: Tambahkan Navigasi

Untuk memungkinkan pengguna ber navigasi antara rute 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 keseluruhan.

Routing Tertanam

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

Berikut cara kita 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>Penelusuran koleksi buku luas kami!</h3>;
}

Dalam contoh ini, komponen Products memiliki rute sendiri. Ketika Anda navigasi ke "/products/electronics", Anda akan melihat baik Products komponen maupun Electronics komponen.

Keuntungan React Router

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

Keuntungan	Deskripsi
Routing Dinamis	Rute didefinisikan sebagai bagian dari komposisi aplikasi Anda, bukan dalam file konfigurasi.
Rute Tertanam	Dengan mudah menciptakan UI kompleks dengan struktur routing tertanam.
Kontrol Sejarah	Menyediakan kontrol halus atas stack riwayat browser.
Pemisahan Kode	Memungkinkan pemisahan kode mudah, meningkatkan kinerja aplikasi.
Routing Declaratif	Mendefinisikan rute sebagai komponen React, membuatnya lebih intuitif dan mudah dikelola.

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia routing React. Kita telah menutupi instalasi, routing dasar, routing tertanam, dan keuntungan penggunaan React Router. Ingat, seperti keterampilan lainnya, routing menjadi mudah dengan latihan. Jadi, jangan takut untuk mencoba dan membangun aplikasi Anda sendiri yang diarahkan.

Saat kita selesai, saya teringat sebuah murid yang pernah berkata ke saya, "Routing React terasa seperti mencoba meng navigasi di labirin tanpa penglihatan." 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 yang paling penting, bersenang-senang membuat aplikasi React yang menakjubkan!

Credits: Image by storyset