Apa saja yang akan dibahas?
Sampai dengan pembelajaran terakhir, kita sudah berhasil membuat aplikasi React, berbasis komponen, mantap bukan?
Tapi semuanya itu masih ada yang kurang loh...
Apakah yang masih kurang itu?
Coba kita ingat ingat lagi ketika kita ingin menampilkan suatu "halaman" dan ber-pindah ke halaman lainnya
Kita masih harus menggunakan conditional rendering untuk menampilkan dan menghilangkan page yang ada bukan?
Mari kita coba untuk melihat contoh berikut untuk lebih jelasnya
Nah sudah liat kekurangannya bukan?
Perpindahan halaman tersebut walaupun terdapat conditional rendering, tetapi setiap kali refresh component akan kembali seperti kondisi semula
Berbeda dengan perpindahan halaman pada aplikasi pada umumnya bukan?
Yang bisa berpindah berdasarkan trailing slash (/nama-rute) yang ada di belakang dari alamat url
Nah sekarang bagaimana caranya kita bisa mengimplementasikan hal tersebut?
Ya, salah satu jawabannya adalah dengan menggunakan React Router
Dikutip dari situsnya langsung, React Router (atau yang terbaru di React Router v6.4+) adalah sebuah library lengkap pada server-side dan client-side untuk Routing / Navigasi pada React.
Yang akan kita pelajari di sini adalah React Router yang digunakan untuk React pada client-side (client-side routing) yah !
Yuk sekarang kita coba melihat cara menggunakan React Router !
Cara untuk menginstall React Router adalah dengan menggunakan npm install react-router-dom@6 (pada folder yang sudah ada project dengan CRA sebelumnya)
Kemudian setelah itu, kita bisa menggunakan React Router pada file src/index.js
import * as React from "react";
import ReactDOM from "react-dom/client";
// Import BrowserRouter untuk bisa menggunakan router
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(
document.getElementById("root")
);
root.render(
<React.StrictMode>
{/* Gunakan BrowserRouter di sini */}
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);Sampai di sini sudah selesai? tentu tydaque ! Mari kita edit file src/App.js
Modifikasi file src/App.js
import * as React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import './style.css';
function App() {
return (
<div className="App">
<h1>Salam dari React Router!</h1>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</div>
);
}
export default App;Selanjutnya kita akan melakukan sesuatu yang TIDAK BOLEH DILAKUKAN saat membuat real case yah! (Hanya untuk pembelajaran saja)
Mari kita modifikasi lagi file src/App.js untuk menambahkan Component Home dan About
Modifikasi file src/App.js (sebelum export)
// Sangat tidak disarankan membuat multi component di App.js, hanya untuk pembelajaran belaka yah !
function Home() {
return (
<>
<main>
<h2>Halo dari Homepage</h2>
<p>Mari belajar Routing, yuk yuk yuk !</p>
</main>
<nav>
<Link to="/about">About</Link>
</nav>
</>
);
}
function About() {
return (
<>
<main>
<h2>Siapakah pembuat halaman ini?</h2>
<p>Duh, ga usah diragukan lagi, orang ga jelas !</p>
</main>
<nav>
<Link to="/">Home</Link>
</nav>
</>
);
}Jalankan kode yang sudah dibuat dan lihat hasilnya !
Nah sampai di titik ini kita sudah berhasil menggunakan React Router untuk navigasi sederhana saja (dengan menggunakan Link)
Bila tertinggal, bisa dilihat pada kode yang ada di sini yah
Bagaimana bila sekarang ini kita akan menggunakan Link namun versi "javascript"-nya?
Untuk hal ini kita akan menggunakan hooks bawaan React Router bernama useNavigate untuk bisa berpindah halaman
React Router ini menyediakan banyak sekali hooks yang bisa digunakan untuk memudahkan developer dalam membuat Routing.
Salah satunya adalah yang bernama useNavigate
Dokumentasi untuk useNavigate bisa dibaca di sini
Nah setelah membaca dokumentasi, mari kita melanjutkan kode yang dibuat ini yah !
Mari kita lanjutkan kode yang tadi
Misalkan kita memiliki sebuah URL sebagai berikut:
Dan pada React Routernya terdapat definisi Routes adalah sebagai berikut:
Artinya adalah:
Nah, dengan menggunakan React Router, bagaimanakah cara kita membaca hal ini?
Untuk bisa membaca Parameters & Query Strings, kita akan menggunakan 2 hooks yang berbeda:
Dokumentasi untuk masing masing hooks dapat dibaca di sini:
Mari kita coba mulai dengan useParams terlebih dahulu
Keseluruhan kode yang dibuat dapat dilihat dengan klik di sini
Selanjutnya kita akan coba untuk menggunakan query strings yah
Langkah untuk membaca query strings dalam bentuk demo ini adalah sebagai berikut:
Sekarang kita akan menyelesaikan permasalahan satu lagi: Bagaimanakah bila kita memiliki rute anakan? (Child / Nested Routes)?
Untuk dapat membuat Nested Routes pada React Router, kita akan menggunakan Outlet
Dokumentasi tentang Outlet bisa dibaca di sini
Langkah untuk menggunakan Outlet, berdasarkan demo kita adalah sebagai berikut:
Untuk melihat kode yang dituliskan, dapat dilihat di sini
Nah sekarang kita akan masuk ke masalah terakhir: Bagaimanakah cara kita menggunakan "default route" atau "no match route"?
Pada saat kita menggunakan React Router, kita akan selalu berasumsi bahwa Akan selalu ada orang iseng yang menuliskan route yang salah
Contoh: Pada demo kita barusan, kita menuliskan route /binatang/1, pastinya tidak ditemukan bukan?
Nah, bagaimanakah cara kita "memarahi" orang yang menuliskan route yang salah?
Salah satu alternatifnya adalah dengan menggunakan No match route
Dokumentasi untuk menggunakan No match route dapat dilihat di sini
Untuk implementasinya dalam demo kita tadi pun, kita cukup memodifikasi file src/App.js saja
Kode demo penggunaan No match route dapat dilihat di sini
Selamat, kita telah menyelesaikan semua permasalahan yang ada di dalam React Router. Kita bisa menggunakan React Router untuk membuat aplikasi yang lebih mudah untuk digunakan.
Selamat membaca dokumentasi menggunakan React Router!
Rasa-rasanya dari aplikasi yang dibuat barusan tanpa tampilan yang "wah" terasa cukup hambar bukan?
Mari kita coba untuk "menghias" tampilan dari aplikasi yang dibuat barusan ini, namun kita coba untuk tidak menggunakan MUI yah !
Kita coba sedikit untuk menggunakan salah satu CSS Library yang cukup populer belakangan ini: TailwindCSS
Bagi yang mungkin belum mengetahui tentang TailwindCSS, bisa dibuka pada Tautan di sini
Langkah-langkah untuk memulainya adalah sebagai berikut:
cd nama-project-yang-dibuat-dengan-cranpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}import React from "react";
function App() {
return (
<div className="App">
<h1 className="text-3xl font-bold underline">Salam dari React Router!</h1>
...
</div>
);
}
export default App;Yay ! selesai !
Untuk mengetahui lebih lanjut tentang TailwindCSS, bisa dibuka pada dokumentasi TailwindCSS langsung yah !