React - Navigasi

Agenda

Apa saja yang akan dibahas?

• Routing?
• React Router - What Is?
• React Router - How To?
• React Router - useNavigate
• React Router - Parameters & Query Strings
• React Router - Nested Page
• React Router - No Match Route
• Bonus - ???
• QnA

Routing?

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?

Routing? (ii)

Mari kita coba untuk melihat contoh berikut untuk lebih jelasnya

Klik di sini

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

• e.g.: http://localhost:3000/A untuk ke Halaman Pertama
• dan http://localhost:3000/B untuk ke Halaman Kedua

Nah sekarang bagaimana caranya kita bisa mengimplementasikan hal tersebut?

Ya, salah satu jawabannya adalah dengan menggunakan React Router

React Router - What Is?

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 !

React Router - How To?

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

React Router - How To? (ii)

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

React Router - How To? (iii)

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>
    </>
  );
}

React Router - How To? (iii)

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 - useNavigate

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 !

React Router - useNavigate (ii)

Mari kita lanjutkan kode yang tadi

1. Membuat sebuah file baru pada src/components/CustomForm.jsx
2. Menuliskan kode untuk membuat Form sederhana yang hanya memiliki sebuah button submit. Pada saat submit ditekan, halaman akan berpindah ke Route /
3. Memodifikasi file src/App.js untuk menambahkan routes yang mengarahkan ke CustomForm
4. Jalankan perubahan dan lihat hasilnya
5. Keseluruhan kode yang ada dituliskan di atas dapat dilihat di sini
6. Sampai di sini artinya kita sudah berhasil untuk membuat navigasi yang terprogram (Programmatic Navigation)
7. Nah sekarang kita memiliki permasalahan selanjutnya: Bagaimana bila ada routing yang ingin kita ambil sebagai parameter / input untuk ditampilkan atau diproses lagi?
8. Istilahnya adalah Navigasi dengan URL Parameter (Navigation with URL Parameters)
9. Untuk mengetahui hal ini kita bisa membaca terlebih dahulu mengenai hal tersebut di sini yah !

React Router - Parameters & Query Strings

Misalkan kita memiliki sebuah URL sebagai berikut:

• https://xxx.web.app/branded/1?q=cari&sort=asc

Dan pada React Routernya terdapat definisi Routes adalah sebagai berikut:

• <Route path="branded/:productId" element={...} />

Artinya adalah:

• Rute /branded memiliki parameter bernama productId yang memiliki value 1
• Rute /branded/1 memiliki object URLSearchParams (atau umumnya disebut query strings) yang berisi key q yang memiliki value cari dan key sort yang memiliki value asc

Nah, dengan menggunakan React Router, bagaimanakah cara kita membaca hal ini?

React Router - Parameters & Query Strings (ii)

Untuk bisa membaca Parameters & Query Strings, kita akan menggunakan 2 hooks yang berbeda:

• useParams untuk membaca Parameters
• useSearchParams untuk membaca Query Strings

Dokumentasi untuk masing masing hooks dapat dibaca di sini:

• useParams
• useSearchParams

React Router - Parameters & Query Strings (iii)

Mari kita coba mulai dengan useParams terlebih dahulu

1. Buat file src/data/animal.js yang berisi data kita (asumsikan data ini adalah data tarikan eksternal)
2. Deklarasikan route pada src/App.js dengan nama animals/:animalId
3. Membuat component untuk menampilkan data binatang yang terpilih berdasarkan id pada file src/containers/AnimalDetailPage.jsx

Keseluruhan kode yang dibuat dapat dilihat dengan klik di sini

React Router - Parameters & Query Strings (iv)

Selanjutnya kita akan coba untuk menggunakan query strings yah

Langkah untuk membaca query strings dalam bentuk demo ini adalah sebagai berikut:

1. Modifikasi file src/App.js untuk menambahkan rute animals
2. Membuat container baru dengan nama AnimalListPage yang akan menggunakan useState, useEffect, dan useSearchParams. Container ini akan menampilkan Listing dari animal id yang ada secara ascending (kecil ke besar) ataupun descending (besar ke kecil) tergantung dari filter yang diberikan
3. Untuk melihat kode yang dituliskan, dapat dilihat di sini

Sekarang kita akan menyelesaikan permasalahan satu lagi: Bagaimanakah bila kita memiliki rute anakan? (Child / Nested Routes)?

React Router - Nested Page

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:

1. Memodifikasi file src/App.js untuk menjadikan Route /animals/:animalId menjadi Nested Route di dalam Route /animals
2. Memodifikasi file src/containers/AnimalListPage.jsx untuk menggunakan Link dan Outlet di sini.
   • Link sebagai anchor-nya (setiap list yang ada akan dibuatkan anchornya)
   • Outlet sebagai Component untuk menampilkan AnimalDetailPage-nya nanti
3. Memodifikasi file src/containers/AnimalDetailPage.jsx, pada bagian dependency list dari useEffect, untuk menggunakan useParams.

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"?

React Router - 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

Kesimpulan

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!

Bonus

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

Demo - Install TailwindCSS

Langkah-langkah untuk memulainya adalah sebagai berikut:

1. cd nama-project-yang-dibuat-dengan-cra
2. Install tailwind dengan npm install -D tailwindcss postcss autoprefixer
3. Inisialisasi tailwind dengan npx tailwindcss init -p
4. Setelah inisialiasi ini akan dibuatkan dua buah file: tailwind.config.js dan postcss.config.js
5. Modifikasi file tailwind.config.js dengan kode berikut:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

Demo - Install TailwindCSS (ii)

7. Modifikasi file index.css untuk menambahkan tailwindcss sebagai berikut:

   @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;
   }

Demo - Install Tailwind CSS (iii)

8. Modifikasi file App.js untuk menggunakan class TailwindCSS sebagai berikut:

   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;

9. Jalankan aplikasi dengan npm run start
10. Sampai di sini, ketika aplikasi berjalan, kita sudah berhasil menggunakan TailwindCSS

Yay ! selesai !

Untuk mengetahui lebih lanjut tentang TailwindCSS, bisa dibuka pada dokumentasi TailwindCSS langsung yah !

QnA

Referensi

• https://reactrouter.com/docs/en/v6
• https://reactrouter.com/docs/en/v6/getting-started/tutorial
• https://tailwindcss.com/docs/installation