Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara membuat dan menjalankan project React menggunakan Vite dan pada kesempatan kali ini kita semua akan belajar bersama-sama bagaimana cara melakukan installasi dan konfigurasi React Router DOM di dalam project React, yang mana digunakan untuk membuat navigasi secara SPA (single page application).
Apa itu React Router DOM ?
React Router DOM adalah library yang digunakan untuk membuat navigasi di dalam aplikasi web berbasis React. Dengan library ini, kita bisa membuat Single Page Application (SPA) dimana pengguna bisa berpindah antar halaman web tanpa perlu memuat ulang seluruh halaman. React Router DOM membuat navigasi ini terasa cepat dan mulus.
Langkah 1 - Installasi React Router DOM
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project React-nya.
npm install react-router-dom@6.23.0
Silahkan tunggu proses installasinya sampai selesai dan pastikan komputer terhubung dengan internet.
Langkah 2 - Konfigurasi React Router DOM
Setelah proses installasi selesai dilakukan, maka langkah berikutnya adalah melakukan register React Router DOM di dalam project secara global, tujuannya agar bisa digunakan disemua component yang ada di project.
Silahkan teman-teman buka file src/main.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
)
Dari perubahan kode di atas, kita import BrowserRouter dari React Router DOM.
//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';
Kemudian kita render atau letakkan component App di dalam BrowserRouter tersebut.
<BrowserRouter>
<App />
</BrowserRouter>
Langkah 3 - Integrasi Bootstrap
Kali ini kita akan menggunakan Bootstrap sebagai framework CSS yang digunakan, ini akan mempercepat kita dalam pembuatan sebuah UI atau user interface.
Silahkan teman-teman buka file index.html, kemudian ubah kode-nya menjadi seperti berikut ini.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React + Zustand - SantriKoding.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap" rel="stylesheet">
<style>
body { background-color: lightgray; font-family: 'Quicksand', sans-serif }
</style>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Dari perubahan kode di atas, kita melakukan import CSS dan JS dari Bootstrap secara online.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
Dan kita juga menambahkan sedikit custom CSS untuk mempercantik tampilan aplikasi kita nanti.
body { background-color: lightgray; font-family: 'Quicksand', sans-serif }
Langkah 4 - Membuat Views
Sebelum kita membuat konfigurasi route, maka kita perlu membuat beberapa view yang nanti dirender saat route tersebut diakses. Berikut ini beberapa view yang akan kita buat.
-
home - untuk menampilkan halaman homepage.
-
register - untuk menampilkan halaman register.
-
login - untuk menampilkan halaman login.
-
dashboard - untuk menampilkan halaman dashboard dan data user yang berhasil login.
View Home
Silahkan teman-teman buat folder baru dengan nama views di dalam folder src, kemudian di dalam folder views tersebut silahkan buat folder baru lagi dengan nama home dan di dalamnya silahkan buat file dengan nama index.jsx dan masukkan kode berikut ini di dalamnya.
src/views/home/index.jsx
export default function Home() {
return (
<div className="p-5 mb-4 bg-light rounded-3">
<div className="container-fluid py-5">
<h1 className="display-5 fw-bold">REACT + ZUSTAND</h1>
<p className="col-md-8 fs-4">Belajar State Management di React dengan Zustand</p>
</div>
</div>
)
}
View Register
Silahkan buat folder baru dengan nama auth di dalam folder src/views, kemudian di dalam folder tersebut silahkan buat file baru dengan nama register.jsx dan masukkan kode berikut ini di dalamnya.
src/views/auth/register.jsx
export default function Register() {
return (
<div className="p-5 mb-4 bg-light rounded-3">
<div className="container-fluid py-5">
<h1 className="display-5 fw-bold">HALAMAN REGISTER</h1>
<p className="col-md-8 fs-4">Belajar State Management di React dengan Zustand</p>
</div>
</div>
)
}
View Login
Silahkan teman-teman buat file baru dengan nama login.jsx di dalam folder src/views/auth, kemudian masukkan kode berikut ini di dalamnya.
src/views/auth/login.jsx
export default function Login() {
return (
<div className="p-5 mb-4 bg-light rounded-3">
<div className="container-fluid py-5">
<h1 className="display-5 fw-bold">HALAMAN LOGIN</h1>
<p className="col-md-8 fs-4">Belajar State Management di React dengan Zustand</p>
</div>
</div>
)
}
View Dashboard
Terakhir, kita buat view untuk halaman dashboard. Silahkan teman-teman buat folder baru dengan nama dashboard di dalam folder src/views, kemudian buat file di dalam folder tersebut dengan nama index.jsx dan masukkan kode berikut ini di dalamnya.
src/views/dashboard/index.jsx
export default function Dashboard() {
return (
<div className="p-5 mb-4 bg-light rounded-3">
<div className="container-fluid py-5">
<h1 className="display-5 fw-bold">HALAMAN DASHBOARD</h1>
<p className="col-md-8 fs-4">Belajar State Management di React dengan Zustand</p>
</div>
</div>
)
}
Langkah 5 - Membuat Konfigurasi Routes
Setelah beberapa view berhasil kita buat, maka langkah berikutnya adalah melakukan konfigurasi dalam pembuatan route.
Silahkan teman-teman buat folder baru dengan nama routes di dalam folder src, kemudian di dalamnya buat file baru dengan nama index.jsx dan masukkan kode berikut ini di dalamnya.
src/routes/index.jsx
//import react router dom
import { Routes, Route } from "react-router-dom";
//import view home
import Home from "../views/home/index.jsx";
//import view register
import Register from "../views/auth/register.jsx";
//import view login
import Login from "../views/auth/login.jsx";
//import view dashboard
import Dashboard from "../views/dashboard/index.jsx";
export default function AppRoutes() {
return (
<Routes>
{/* route "/" */}
<Route path="/" element={<Home />} />
{/* route "/register" */}
<Route path="/register" element={<Register />} />
{/* route "/login" */}
<Route path="/login" element={<Login />} />
{/* route "/dashboard" */}
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
);
}
Dari penambahan kode di atas, pertama-tama kita import 2 module dari React Router DOM, yaitu Routes dan Route.
//import react router dom
import { Routes, Route } from "react-router-dom";
Setelah itu, kita import 4 view yang sudah kita buat sebelumnya.
//import view home
import Home from "../views/home/index.jsx";
//import view register
import Register from "../views/auth/register.jsx";
//import view login
import Login from "../views/auth/login.jsx";
//import view dashboard
import Dashboard from "../views/dashboard/index.jsx";
Dan untuk mendefinisikan route, pertama kita letakkan di dalam <Routes> dan di dalam kita buat route baru. Contohnya seperti berikut.
{/* route "/" */}
<Route path="/" element={<Home />} />
Di atas, untuk path merupakan URL dari route-nya, yaitu /. Sedangkan element adalah view yang dipanggil ketika route tersebut diakses, dimana di dalam element kita panggil view <Home>.
Langkah 6 - Render Route
Sekarang kita akan panggil konfigurasi route di atas di dalam induk component, yaitu App.jsx. Jadi silahkan teman-teman buka file tersebut di dalam folder src/App.jsx, kemudian ubah kode-nya menjadi seperti berikut ini.
src/App.jsx
//import router
import AppRoutes from './routes';
//import Link from react router dom
import { Link } from "react-router-dom";
export default function App() {
return (
<div>
<nav className="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div className="container">
<Link to="/" className="navbar-brand">HOME</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" role="search">
<a href="https://santrikoding.com" target="_blank" className="nav-link">SANTRIKODING.COM</a>
</ul>
<ul className="navbar-nav ms-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link to="/login" className="nav-link" aria-current="page">LOGIN</Link>
</li>
<li className="nav-item">
<Link to="/register" className="nav-link" aria-current="page">REGISTER</Link>
</li>
</ul>
</div>
</div>
</nav>
<div className="container mt-5">
<AppRoutes />
</div>
</div>
)
}
Dari perubahan kode di atas, pertama kita import file route yang sudah kita buat sebelumnya.
//import router
import AppRoutes from './routes';
Kemudian untuk menampilkannya, kita cukup memanggilnya seperti ini di dalam template.
<AppRoutes />
Dan kita juga melakukan import Link dari React Router DOM. Ini kita gunakan karena di dalam file ini terdapat beberapa link yang digunakan untuk navigasi / berpindah-pindah ke halaman lain.
//import Link from react router dom
import { Link } from "react-router-dom";
Langkah 7 - Uji Coba Route
Sekarang jika teman-teman akses halaman awal project atau di http://localhost:5173, jika berhasil maka akan menampilkan seperti berikut ini.
Jika kita klik menu LOGIN dan REGISTER, maka kita akan berpindah ke halaman tersebut tanpa perlu reload page.
Kesimpulan
Pada artikel kali ini, kita semua telah belajar bagaimana cara install dan konfigurasi React Router DOM di dalam project React.
Pada artikel berikutnya, kita semua akan belajar bersama-sama bagaimana cara melakukan installasi dan konfigurasi library yang bernama Zustand untuk state management di React.
Terima Kasih