Halo teman-teman semuanya, setelah berhasil membuat project React TypeScript menggunakan Vite, langkah selanjutnya adalah mengatur navigasi dalam aplikasi kita. Di tutorial ini, kita akan membahas React Router, mengapa kita membutuhkannya, dan bagaimana cara menggunakannya di project kita.
Apa Itu React Router?
React Router adalah library untuk menangani navigasi dalam aplikasi React berbasis Single Page Application (SPA).
Di dalam aplikasi SPA, saat berpindah halaman, browser tidak melakukan reload penuh seperti pada website tradisional. Sebagai gantinya, React Router memungkinkan perubahan halaman dilakukan secara dinamis tanpa perlu memuat ulang seluruh aplikasi.
Dengan React Router, kita bisa:
- Membuat routes untuk halaman-halaman dalam aplikasi.
- Menavigasi antar halaman tanpa reload.
- Menggunakan fitur seperti parameter URL, redirects, dan lazy loading.
Mengapa Menggunakan React Router?
Tanpa React Router, jika kita ingin membuat navigasi antar halaman, kita harus mengandalkan window.location, yang mengakibatkan halaman di-reload. Ini tidak ideal untuk aplikasi modern.
Dengan React Router, navigasi antar halaman bisa dilakukan lebih cepat, lebih efisien, dan lebih halus karena hanya bagian tertentu dari aplikasi yang diperbarui.
Langkah 1 - Installasi React Router
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project React-nya.
npm install react-router@7.4.0
Silahkan tunggu proses installasinya sampai selesai dan pastikan teman-teman terhubung dengan internet.
Langkah 2 - Konfigurasi React Router
Agar bisa dijalankan secara global, maka kita perlu melakukan sedikit konfigurasi di dalam project. Silahkan buka file src/main.tsx, kemudian ubah kode-nya menjadi seperti berikut ini.
src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router';
createRoot(document.getElementById('root')!).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
)
Dari perubahan kode di atas, kita hapus kode yang digunakan untuk import index.css. Kemudian kita import BrowserRouter dari React Router.
//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router';
Setelah itu, kita bungkus component App menggunakan BrowserRouter.
<BrowserRouter>
<App />
</BrowserRouter>
Langkah 3 - Integrasi Bootstrap
Untuk mempercepat dan mempermudah dalam membangun user interface, maka kita akan manfaatkan framework CSS yang bernamaBootstrap.
Silahkan buka file index.html, kemudian ubah semua 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>Vite + React + TS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<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.tsx"></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 View Home
Sekarang kita akan membuat sebuah view yang nanti ditampilkan sebagai homepage dari website yang kita buat.
Silahkan buat folder baru dengan nama views di dalam folder src, kemudian di dalam folder views silahkan buat file baru dengan nama home.tsx dan masukkan kode berikut ini di dalamnya.
src/views/home.tsx
// import FC from react
import { FC } from 'react';
export const Home: FC = () => {
return (
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="p-5 mt-5 mb-4 bg-light rounded-5">
<div className="container-fluid py-5">
<h1 className="display-5 fw-bold">VITE + REACT + TS</h1>
<p className="col-md-8 fs-4">Belajar CRUD dengan React dan TypeScript di SantriKoding.com</p>
</div>
</div>
</div>
</div>
</div>
)
}
export default Home;
Dari penambahan kode di atas, kita import FC dari React. FC (Functional Component) adalah Type bawaan dari React yang digunakan untuk mendefinisikan function component dalam TypeScript.
// import FC from react
import { FC } from 'react';
Kemudian kita membuat function component dengan nama Home. Disini kita menggunakan FC dari React, yang berarti component ini adalah Functional Component yang diketik secara eksplisit dengan TypeScript.
export const Home: FC = () => {
//...
}
Langkah 5 - Konfigurasi Router
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.tsx dan masukkan kode berikut ini di dalamnya.
src/routes/index.tsx
// Import FC from React
import { FC } from "react";
// Import React Router
import { Routes, Route } from "react-router";
// Import view HomePage
import Home from "../views/home";
// Definisikan component dengan Type FC (Functional Component)
const RoutesIndex: FC = () => {
return (
<Routes>
{/* Route untuk halaman utama */}
<Route path="/" element={<Home />} />
</Routes>
);
};
export default RoutesIndex;
Dari penambahan kode di atas, Dari penambahan kode di atas, kita import FC dari React.
// Import FC from React
import { FC } from "react";
Kemudian kita import 2 mo∂dule dari React Router, yaitu Routes dan Route.
// Import React Router
import { Routes, Route } from "react-router";
Setelah itu, kita import view home yang sudah kita buat sebelumnya.
// Import view HomePage
import Home from "../views/home";
Selanjutnya, kita membuat function component dengan nama RoutesIndex.
const RoutesIndex: FC = () => {
//...
}
Di dalamnya kita mendefinisikan route, pertama kita letakkan di dalam <Routes> dan di dalam kita buat route baru. Contohnya seperti berikut.
<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.tsx.
Jadi silahkan teman-teman buka file src/App.tsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/App.tsx
//import FC from react
import { FC } from "react";
//import link from react-router
import { Link } from "react-router";
//import Routes
import Routes from "./routes";
const App: FC = () => {
return (
<>
<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="/products" className="nav-link active">PRODUCTS</Link>
</li>
</ul>
<ul className="navbar-nav ms-auto mb-2 mb-lg-0">
<li className="nav-item">
<a href="https://santrikoding.com" target="_blank" rel="noopener noreferrer" className="btn btn-success rounded-5">
SANTRIKODING.COM
</a>
</li>
</ul>
</div>
</div>
</nav>
<Routes />
</>
);
};
export default App;
Dari perubahan kode di atas, kita import Type FC dari React.
//import FC from react
import { FC } from "react";
Kemudian kita import Link dari React Router. Ini akan kita gunakan untuk melakukan navigasi ke route-route di dalam aplikasi.
//import link from react-router
import { Link } from "react-router";
Selanjutnya, 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.
Kesimpulan
Pada artikel ini, kita semua telah belajar mengenal apa itu React Router, kemudian belajar menginstall serta melakukan konfigurasi di dalam React TypeScript.
Pada artikel selanjutnya, kita semua akan belajar bagaimana cara menampilkan data dari Rest API di React TypeScript.
Terima Kasih