Kali ini kita akan membahas tentang bagaimana cara menginstall dan mengkonfigurasi React Router DOM

Apa itu React Router DOM?
React Router DOM adalah sebuah library JavaScript yang digunakan dalam pengembangan aplikasi web berbasis React. Ini digunakan untuk mengatur route atau navigasi di aplikasi kita.

Langkah 1: Install React Router DOM

Didalam project React, jalankan kode perintah di bawah ini dengan menggunakan Command Prompt / Terminal.

npm install react-router-dom

Langkah 2: Konfigurasi React Router DOM

Sebelum dapat menggunakannya, kita perlu melakukan beberapa konfigurasi dalam proyek. Silahkan buka file src/index.js dan ubah kodenya seperti berikut:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

//import BrowserRouter dari react-router-dom
import { BrowserRouter} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

Dari perubahan kode di atas, langkah pertama yang kita lakukan adalah melakukan import modul BrowserRouter dari React Router DOM. Kemudian component app kita masukkan ke dalam BrowserRouter sebagai tampilan yang akan muncul pertama kali pada saat project dijalankan.

//import BrowserRouter dari react-router-dom
import { BrowserRouter} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

Langkah 3: Membuat Model Views

Untuk menghindari error dalam pembuatan route, langkah yang kita lakukan adalah membuat Views terlebih dahulu. Views ini nantinya akan digunakan ketika router tertentu diakses.

Pertama, membuat View Homepage yang akan kita gunakan sebagai halaman beranda. Untuk memulainya, kita bisa membuat folder baru dengan nama 'views' di dalam folder 'src'. Kemudian, dalam folder 'views' tersebut, buat file baru dengan nama 'home.js' dan tambahkan kode berikut ke dalamnya.

export default function Beranda() {
    return (
        <div className="p-5 mb-4">
            <div className="container-fluid py-5">
                <h1 className="display-6 fw-bold">Instalasi dan Registrasi React Router DOM</h1>
            </div>
        </div>
    )
}

Selanjutnya kita membuat view post index. Untuk memulainya, kita bisa membuat folder baru dengan nama 'posts' di dalam folder 'src/views'. Kemudian, didalam folder 'posts' tersebut, buat file baru dengan nama 'index.js' dan tambahkan kode berikut ke dalamnya.

export default function PostIndex() {
    return (
        <div className="p-5 mb-4">
            <div className="container-fluid py-5">
                <h1 className="display-6 fw-bold">Ini adalah Halaman Post</h1>
            </div>
        </div>
    )
}

Kemudian membuat view untuk halaman view create post. Langkah pertama yaitu membuat file baru pada folder src/views/posts dengan nama "create.js", kemudian tambahkan kode berikut didalamnya.

export default function PostCreate() {
    return (
        <div className="container mt-5 mb-5">
            <div className="row">
                <div className="col-md-12">
                    <div className="card border-0">
                        <div className="card-body">
                            Halaman Post Create
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

Yang terakhir, kita buat views untuk halaman post edit. Kita bisa membuat folder baru dengan nama 'edit.js' di dalam folder 'src/views/posts'. Kemudian, tambahkan kode berikut ke dalamnya.

export default function PostEdit() {
    return (
        <div className="container mt-5 mb-5">
            <div className="row">
                <div className="col-md-12">
                    <div className="card border-0">
                        <div className="card-body">
                            Halaman Post Edit
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

Langkah 4: Konfigurasi Router di REACT

Setelah berhasil menyelesaikan pembuatan view, langkah selanjutnya adalah membuat konfigurasi router. Langkah awal yaitu kita membuat folder baru dengan nama "routes" di dalam folder src. Kemudian, didalam folder  src tersebut, buat file baru dengan nama 'index.js' dan tambahkan kode berikut ke dalamnya.

//import react router dom
import { Routes, Route } from "react-router-dom";

//import view homepage
import Beranda from '../views/home.js';

//import view posts index
import PostIndex from '../views/posts/index.js';

//import view post create
import PostCreate from '../views/posts/create.js';

//import view post edit
import PostEdit from '../views/posts/edit.js';

function RoutesIndex() {
    return (
        <Routes>

            {/* route "/" */}
            <Route path="/" element={<Beranda />} />

            {/* route "/posts" */}
            <Route path="/posts" element={<PostIndex />} />

            {/* route "/posts/create" */}
            <Route path="/posts/create" element={<PostCreate />} />

            {/* route "/posts/edit/:id" */}
            <Route path="/posts/edit/:id" element={<PostEdit />} />

        </Routes>
    )
}

export default RoutesIndex

Langkah awal dalam mendefinisikan route adalah menempatkannya di dalam tag . Di dalamnya, kita akan membuat route baru seperti gambar berikut:

{/* route "/" */}
<Route path="/" element={<Beranda />} />

Penjelasan singkatnya, untuk path adalah URL dari route-nya, yaitu "/". Sedangkan elemen adalah View yang dipanggil ketika route diakses yang kita sebut sebagai <beranda>.

Langkah 5: Registrasi Route

Agar route dapat diakses secara global, langkah pertama adalah memanggilnya di dalam komponen utama, yaitu app.js. Silahkan tambah kode dibawah ini kedalam file src/App.js

//import Link from react router dom
import { Link } from "react-router-dom";

//import routes
import Routes from './routes';

export default function App() {

  return (
    <>
      <div>
        <nav className="navbar navbar-expand-lg bg-secondary" data-bs-theme="dark">
          <div className="container">
            <Link to="/" className="navbar-brand">Beranda</Link>
            <button
              className="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                  <Link to="/posts" className="nav-link active" aria-current="page">Posts</Link>
                </li>
              </ul>
              <ul className="navbar-nav ms-auto mb-2 mb-lg-0" role="search">
                <a href="#" target="_blank" className="btn btn-primary">Belajar Install dan Konfigurasi React Router Dom</a>
              </ul>
            </div>
          </div>
        </nav>
      </div>

      <Routes />

    </>
  )
  
}

Terdapat { Link } dari "react-router-dm"; yang digunakan untuk melakukan navigasi ke route-route di dalam aplikasi.

Langkah 6: Test Route

Untuk mengetahui apakah halaman web sudah berhasil dibuat, silahkan akses http://localhost:3000/ atau sesuai dengan localhost projek kamu.

kemudian jika kita klik tab menu "Posts", maka akan menuju ke halaman post index.