Pada tutorial ini kita akan belajar membuat router di dalam aplikasi berbasis React menggunakan library yang bernama React Router DOM.
Pada tutorial sebelumnya kita telah mempelajari tentang cara Install Reactjs dengan Vite. Untuk menunjang tutorial ini sebaiknya memahami dulu tentang Insatalasi Reactjs.
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 Single Page Application (SPA).
1. Installasi React Router DOM
Silahkan buka Terminal/CMD, pastikan sudah berada pada path project React-nya, kemudian jalankan perintah berikut :
npm install react-router-dom@6.4.5
Pastikan laptop/komputer yang digunakan terhubung dengan internet, tunggu beberapa saat sanpai proses installasinya sampai selesai.
2. Konfigurasi React Router DOM
Kita perlu melakukan sedikit konfigurasi di dalam project, supaya bisa dijalankan secara global. 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 './index.css'
//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>
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" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Laravel 10 + Vite + React</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>
Perhatikan kode di atas, kita menambahkan CSS dan JS dari Bootstrap secara CDN atau Online.
Hasilnya :
4. Membuat Views
Supaya 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 buat view yang akan kita gunakan sebagai halaman homepage. Silahkan 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 masukkantuliskan 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">LARAVEL 10 + REACT (VITE)</h1>
<p className="col-md-8 fs-4">
Belajar CRUD dengan Laravel 10 dan React di agussuratna.net
</p>
</div>
</div>
);
}
View Posts Index
Selanjutnya kita buat view post index, silahkan 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 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 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>
);
}
5. Konfigurasi Router di React
Setelah view berhasil dibuat semuanya, maka langkah berikutnya adalah membuat konfigurasi router-nya itu sendiri.
Silahkan 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;
Perhatikan sintak 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 />} />
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>.
6. Register Route
Agar route bisa digunakan secara global, maka kita perlu memanggilnya di dalam component induk, yaitu App.jsx. Jadi silahkan 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://agussuratna.net"
target="_blank"
className="btn btn-success"
>
AGUSSURATNA.NET
</a>
</ul>
</div>
</div>
</nav>
</div>
<Routes />
</>
);
}
Perhatikan sintak 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 />
7. Uji Coba Route
Sekarang jika kita akses halaman awal project atau di http://localhost:5173, jika berhasil maka akan menampilkan seperti berikut ini.
Jika kita klik menu POSTS, maka akan diarahkan ke halaman post index secara SPA atau single page application.
Pada tutorial ini kita telah belajar banyak tentang Reactjs, 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 mempelajari cara menampilkan data di dalam React dari Rest API yang dibuat di Laravel.
Jika ada pertanyaan silahkan tuliskan di kolom komentar, semoga bermanfaat.
