React Router vs. React Router DOM

React Router vs. React Router DOM

React Router vs. React Router DOM

Routing adalah teknik penting untuk navigasi antar halaman di situs web berdasarkan permintaan dan tindakan pengguna. Sebuah pustaka terpisah bernama React Router memungkinkan routing dalam aplikasi React dan memungkinkan mendefinisikan beberapa rute dalam aplikasi. Tetapi apakah akan menginstal paket react-router atau react-router-dom dapat membingungkan. Artikel ini membahas kebingungan ini dengan menganalisis perbedaannya dan di mana menggunakan paket mana.

Mengapa React Router Dibutuhkan?

React adalah framework JavaScript terkenal yang ideal untuk membangun aplikasi satu halaman. Meskipun ini adalah salah satu solusi terbaik untuk membangun situs web, React tidak menyertakan banyak fitur lanjutan atau perutean secara default. Oleh karena itu, React Router adalah pilihan navigasi yang sangat baik untuk aplikasi satu halaman ini untuk membuat banyak tampilan.

Apa itu React Router?

React Router adalah pustaka standar populer untuk perutean di antara berbagai komponen tampilan dalam aplikasi React. Ini membantu menjaga antarmuka pengguna tetap sinkron dengan URL. Selain itu, React Router memungkinkan mendefinisikan tampilan mana yang akan ditampilkan untuk URL tertentu.

Tiga paket utama yang terkait dengan React Router adalah:

Ø  React-Router : Berisi fungsionalitas inti dari React Router, termasuk algoritma pencocokan rute dan kait.

Ø  React-Router-Dom : Termasuk semua yang ada di react-router dan menambahkan beberapa API khusus DOM.

Ø  React-Router-Native : Termasuk semua yang ada di react-router dan menambahkan beberapa API khusus React Native.

Apa itu React Router DOM?

Fungsi utama react-router-dom adalah menerapkan routing dinamis dalam aplikasi web. Berdasarkan platform dan persyaratan aplikasi, react-router-dom mendukung routing berbasis komponen, yang merupakan solusi ideal untuk routing jika aplikasi React berjalan di browser.

Cara Menggunakan React Router DOM

Langkah 1: Instal paket

 npm install react-router-dom

Langkah 2: Impor <BrowserRouter>.

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

    function App() {

    return (

    <BrowserRouter>

    </BrowserRouter>

    );

    }

    export default App;

Langkah 3: Impor dan gunakan komponen anak, <Rute>.

    import { BrowserRouter, Routes, Route } from 'react-router-dom';

    import About from './components/about';

    import Home from './components/home';

    function App() {

    return (

    <BrowserRouter>

    <div><Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

        </Routes>

    </div>

    </BrowserRouter>

    );

    }

Saat URL berubah ke jalur yang ditentukan, antarmuka pengguna juga berubah untuk menampilkan komponen tertentu. Berikut adalah beberapa komponen yang dapat Anda gunakan dalam aplikasi Anda.

Ø  <BrowserRouter>: BrowserRouter adalah komponen induk di react-router-dom yang menyimpan semua komponen rute lainnya. Mengizinkan deklarasi rute individual adalah fungsi utama menggunakan BrowserRouter dalam aplikasi.

Ø  <Rute>: Rute adalah komponen baru yang diperkenalkan di v6 yang menggantikan komponen switch. (Switch merender rute secara eksklusif karena menampilkan rute turunan pertama yang cocok dengan URL saat ini).

Ø  <Route>: Route adalah komponen turunan yang merender komponen UI tertentu saat URL cocok dengan jalur yang ditentukan. Atribut path menentukan nama  path yang kita tetapkan ke komponen dan atribut element mengacu pada komponen yang akan dirender saat URL cocok.

Ø  <Link>: Seperti namanya, Link memungkinkan pengguna untuk menavigasi ke halaman lain dengan mengkliknya. Misalnya, Anda dapat menggunakannya saat membuat bilah navigasi aplikasi. Dimungkinkan untuk menambahkan gaya inline ke komponen ini.

    function Navbar() {

        return (

        <nav>

                <Link to="/">Home</Link>

                <Link to="/profile">Profile</Link>

        </nav>

        )

    }

Cara Menangani Halaman yang Tidak Ditemukan

Mungkin ada contoh ketika pengguna mencoba mengakses jalur yang tidak ada dalam aplikasi. Dalam kasus seperti itu, Anda dapat menetapkan tanda bintang (*) sebagai jalur untuk mengarahkan pengguna ke halaman Halaman Tidak Ditemukan.

    <BrowserRouter><Routes><Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

        <Route path="*" element={<PageNotFound />} />

    </Routes>

    </BrowserRouter>

Setelah mendeklarasikan jalur seperti yang ditunjukkan pada cuplikan kode sebelumnya, pengguna akan melihat halaman Halaman Tidak Ditemukan jika mereka memasukkan jalur yang salah. Untuk kenyamanan, Anda bahkan dapat menambahkan tautan ke halaman Beranda di dalam halaman Halaman Tidak Ditemukan.

Perbedaannya React Router vs. React Router DOM

react-router  adalah paket inti yang berisi komponen standar dan fungsi untuk mengimplementasikan routing dalam aplikasi React.

React-Router-Dom adalah paket khusus yang hanya dapat Anda gunakan dalam pengembangan aplikasi berbasis browser web. Ini mengekspor react-router sebagai ketergantungan dan memiliki tambahan DOM (document object model) binding seperti <BrowserRouter> dan <Link>.

Kapan Menggunakan yang mana

Jika Anda bekerja pada aplikasi web, pilihan yang lebih baik adalah menggunakan react-router-dom, karena berisi semua komponen dan fitur umum yang diperlukan untuk perutean dalam aplikasi web. react-router-dom menginstal react-router sebagai dependensi, jadi tidak perlu menginstal ulang dan mengimpor apa pun langsung dari react-router.

Bahkan pada aplikasi seluler dengan React Native, react-router-native sudah cukup, untuk alasan yang sama seperti react-router-dom sudah cukup di aplikasi web.

Karena itu, tidak perlu mengimpor paket react-router langsung di mana saja, karena react-router-dom dan react-router-native menyediakan semua fungsi yang diperlukan.