Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar membuat router di dalam aplikasi berbasis React menggunakan library yang bernama React Router DOM.
Apa itu React Router DOM ?
React Router DOM adalah sebuah library yang digunakan dalam pengembangan aplikasi web dengan menggunakan React. Library ini memungkinkan untuk membuat navigasi pada aplikasi web menjadi cepat dan SPA atau Single Page Application.
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.4.5
Silahkan tunggu proses installasinya sampai selesai dan pastikan teman-teman terhubung dengan internet.
Langkah 2 - Konfigurasi React Router DOM
Agar bisa dijalankan secara global, maka kita perlu melakukan sedikit konfigurasi di dalam project. Silahkan buka file src/main.jsx, kemudian ubah kode-nya menjadi seperti berikut ini.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
//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, pertama kita melakukan import module BrowseRouter dari React Router DOM.
//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';
kemudian kita gunakan module tersebut untuk membungkus component App. Karena component App yang akan di render pertama kali saat project di jalankan.
<BrowserRouter>
<App />
</BrowserRouter>
Langkah 3 - Integrasi Bootstrap di React
Untuk mempercepat dan mempermudah dalam membangun user interface, maka kita akan manfaatkan framework Bootstrap.
Silahkan buka file index.html, kemudian ubah semua kode-nya menjadi seperti berikut ini.
<!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 + Laravel 10 - SantriKoding.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" 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>
Bisa teman-teman perhatikan kode di atas, yaitu kita menambahkan CSS dan JS dari Bootstrap secara CDN atau Online.
Langkah 4 - Membuat Views
Agar tidak terjadi error saat membuat route, maka kita akan membuat sebuah views terlebih dahulu. Views ini nantinya yang akan dipanggil saat router tertentu dipanggil.
View Homepage
Pertama, kita akan buat view yang nanti kita gunakan sebagai halaman homepage. Silahkan teman-teman buat folder baru dengan nama views di dalam folder src, kemudian di dalam folder views tersebut silahkan buat file baru dengan nama home.jsx dan masukkan kode berikut ini di dalamnya.
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 (VITE) + LARAVEL 10</h1>
<p className="col-md-8 fs-4">Belajar CRUD dengan React dan Laravel 10 di SantriKoding.com</p>
</div>
</div>
)
}
View Posts Index
Selanjutnya kita buat untuk view post index, silahkan teman-teman buat folder baru dengan nama posts di dalam folder src/views, kemudian di dalam folder posts tersebut buatlah file baru dengan nama index.jsx dan masukkan kode berikut ini di dalamnya.
export default function PostIndex() {
return (
<div className="container mt-5 mb-5">
<div className="row">
<div className="col-md-12">
<div className="card border-0 rounded shadow">
<div className="card-body">
HALAMAN POSTS INDEX
</div>
</div>
</div>
</div>
</div>
)
}
View Post Create
Kemudian kita buat view lagi untuk halaman view create post, silahkan teman-teman buat file baru dengan nama create.jsx di dalam folder src/views/posts, kemudian masukkan kode berikut ini di dalamnya.
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 rounded shadow">
<div className="card-body">
HALAMAN POST CREATE
</div>
</div>
</div>
</div>
</div>
)
}
View Post Edit
Terakhir, kita buat view lagi untuk halaman post edit, silahkan teman-teman buat file baru dengan nama edit.jsx di dalam folder src/views/posts, kemudian masukkan kode berikut ini di 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 rounded shadow">
<div className="card-body">
HALAMAN POST EDIT
</div>
</div>
</div>
</div>
</div>
)
}
Langkah 5 - Konfigurasi Router di React
Setelah view berhasil dibuat semuanya, maka langkah berikutnya adalah membuat konfigurasi router-nya itu sendiri.
Silahkan teman-teman buat folder baru dengan nama routes di dalam folder src, kemudian di dalam folder routes tersebut silahkan buat file baru dengan nama index.jsx dan masukkan kode berikut ini di dalamnya.
//import react router dom
import { Routes, Route } from "react-router-dom";
//import view homepage
import Home from '../views/home.jsx';
//import view posts index
import PostIndex from '../views/posts/index.jsx';
//import view post create
import PostCreate from '../views/posts/create.jsx';
//import view post edit
import PostEdit from '../views/posts/edit.jsx';
function RoutesIndex() {
return (
<Routes>
{/* route "/" */}
<Route path="/" element={<Home />} />
{/* 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
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 homepage
import Home from '../views/home.jsx';
//import view posts index
import PostIndex from '../views//posts/index.jsx';
//import view post create
import PostCreate from '../views//posts/create.jsx';
//import view post edit
import PostEdit from '../views//posts/edit.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 - Register Route
Agar route bisa digunakan secara global, maka kita perlu memanggilnya di dalam component induk, yaitu App.jsx.
Jadi silahkan teman-teman buka file src/App.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
//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-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">
<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="https://santrikoding.com"
target="_blank"
className="btn btn-success"
>SANTRIKODING.COM</a
>
</ul>
</div>
</div>
</nav>
</div>
<Routes />
</>
)
}
Dari perubahan kode di atas, pertama kita import Link dari React Router DOM. Ini akan kita gunakan untuk melakukan navigasi ke route-route di dalam aplikasi.
//import Link from react router dom
import { Link } from "react-router-dom";
Kemudian kita import konfigurasi router yang sudah kita buat sebelumnya.
//import routes
import Routes from './routes';
Dan di dalam JSX, kita panggil routes yang sudah kita import di atas.
<Routes />
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 teman-teman klik menu POSTS, maka akan diarahkan ke halaman post index secara SPA atau single page application.
Kesimpulan
Pada artikel ini kita telah belajar banyak sekali, terutama dibagian konfigurasi React Router DOM. Yaitu kita belajar melakukan proses installasi, konfigurasi, register route, integrasi Bootstrap dan membuat layout App.
Pada artikel selanjutnya kita semua akan belajar bagaimana cara menampilkan data di dalam React dari Rest API yang dibuat di Laravel.
Terima Kasih