Halo teman-teman semuanya, pada artikel sebelumnya kita semua telah belajar bagaimana cara membuat project React menggunakan Vite dan pada artikel kali ini kita semua akan belajar bagaimana cara install dan konfigurasi React Router di dalam project React.
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.jsx, kemudian ubah kode-nya menjadi seperti berikut ini.
src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
//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" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</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.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 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.tjsx dan masukkan kode berikut ini di dalamnya.
src/views/home.jsx
export const Home = () => {
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">REACT + TANSTACK QUERY</h1>
<p className="col-md-8 fs-4">Belajar CRUD dengan React dan Tanstack Query di SantriKoding.com</p>
</div>
</div>
</div>
</div>
</div>
)
}
export default Home;
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.jsx dan masukkan kode berikut ini di dalamnya.
src/routes/index.jsx
// Import React Router
import { Routes, Route } from "react-router";
// Import view HomePage
import Home from "../views/home";
// Definisikan component dengan (Functional Component)
const RoutesIndex = () => {
return (
<Routes>
{/* Route untuk halaman utama */}
<Route path="/" element={<Home />} />
</Routes>
);
};
export default RoutesIndex;
Dari penambahan kode di atas, kita import 2 module 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 = () => {
//...
}
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.jsx.
Jadi silahkan teman-teman buka file src/App.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/App.jsx
//import link from react-router
import { Link } from "react-router";
//import Routes
import Routes from "./routes";
const App = () => {
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 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.
Pada artikel selanjutnya, kita semua akan belajar bagaimana cara install dan konfigurasi TanStack Query di dalam project React.
Terima Kasih