Tutorial React JS #6: Menggunakan React Router

Pada artikel kali ini, kita akan membahas tentang React Router, serta membahas mengapa kita membutuhkan React Router itu sendiri.

Apa itu React Router?

React Router adalah sebuah library yang digunakan dalam aplikasi React untuk membuat routing dan navigasi antar halaman. Dengan React Router, kita dapat membuat sebuah aplikasi web yang memiliki banyak halaman dengan URL yang berbeda-beda. React Router membantu kita untuk mengatur halaman-halaman tersebut dan memastikan bahwa setiap halaman ditampilkan dengan tepat.

Mengapa kita membutuhkan React Router?

Tanpa React Router, aplikasi React yang memiliki banyak halaman akan menjadi sangat sulit untuk dikelola. Kita harus membuat komponen untuk setiap halaman dan memastikan bahwa setiap komponen ditampilkan pada URL yang tepat. Dengan menggunakan React Router, kita dapat memisahkan logika routing dari logika komponen sehingga kita dapat fokus pada pengembangan aplikasi itu sendiri.

Menginstall React Router

Setelah paham apa itu React Router dan mengapa kita membutuhkanya, sekarang kita akan coba untuk menginstall React Router.

Cara Menginstall React Router menggunakan npm

Untuk menginstall React Router, kita dapat menggunakan npm (Node Package Manager). Berikut ini adalah langkah-langkahnya:

Buka terminal atau command prompt pada komputer Anda.
Ketikkan perintah berikut: npm install react-router-dom
Tunggu hingga proses instalasi selesai.

Mengimpor React Router

Setelah React Router terinstall, kita perlu mengimpor library tersebut pada file aplikasi kita. Berikut ini adalah contohnya:

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

Menggunakan React Router

Setelah kita sudah menginstall dan mengimport Router, sekarang kita akan coba untuk menggunakan React Router

Membuat routing sederhana

Untuk membuat routing sederhana pada aplikasi ReactJS, kita perlu membuat sebuah Router dan beberapa Route. Berikut ini adalah contohnya:

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
      </Switch>
    </Router>
  );
}

Kode di atas akan menampilkan komponen Home saat URL adalah “/” (root), komponen About saat URL adalah “/about“, dan komponen Contact saat URL adalah “/contact“.

Navigasi dengan menggunakan Link

Untuk membuat navigasi antar halaman pada aplikasi React, kita dapat menggunakan komponen Link dari React Router. Berikut ini adalah contohnya:

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

Kode di atas akan menampilkan tautan ke halaman Home, About, dan Contact.

Penggunaan Router

1. Menentukan path pada Route

Untuk menentukan path pada Route, kita perlu menambahkan prop “path” pada komponen Route. Prop “path” berisi pola URL yang akan dipakai untuk menentukan halaman mana yang akan ditampilkan. Berikut ini adalah contohnya:

<Route path="/product/:id">
  <Product />
</Route>

Kode di atas akan menampilkan halaman Product ketika URL adalah “/product/:id“, di mana “:id” adalah parameter yang dapat diisi dengan nilai apa saja.

2. Menentukan component yang akan ditampilkan

Untuk menentukan komponen yang akan ditampilkan pada halaman tertentu, kita perlu menambahkan komponen tersebut di dalam komponen Route. Berikut ini adalah contohnya:

<Route path="/about">
  <About />
</Route>

Kode di atas akan menampilkan komponen About ketika URL adalah “/about“.

Menggunakan Switch untuk mengatur tampilan

Jika kita memiliki beberapa Route pada aplikasi kita, maka kita perlu memastikan bahwa hanya satu halaman yang ditampilkan pada satu waktu. Untuk itu, kita dapat menggunakan komponen Switch dari React Router. Berikut ini adalah contohnya:

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
        <Route path="*">
          <NotFound />
        </Route>
      </Switch>
    </Router>
  );
}

Kode di atas akan menampilkan halaman pertama yang sesuai dengan pola URL. Jika tidak ada pola URL yang cocok, maka akan ditampilkan halaman NotFound.

Menangani Parameter di React Router

1. Mendapatkan paramater dari URL menggunakan props

Untuk mendapatkan parameter dari URL, kita dapat menggunakan props “match” pada komponen yang ditampilkan pada halaman tersebut. Berikut ini adalah contohnya:

function Product(props) {
  const productId = props.match.params.id;
  // ...
}

Kode di atas akan mendapatkan nilai dari parameter “id” pada URL dan menyimpannya pada variabel “productId”.

2. Menampilkan data berdasarkan parameter

Setelah mendapatkan nilai parameter dari URL, kita dapat menggunakan nilai tersebut untuk menampilkan data yang sesuai. Berikut ini adalah contohnya:

function Product(props) {
  const productId = props.match.params.id;
  const product = products.find((p) => p.id === productId);
  // ...
}

Kode di atas akan mencari produk yang memiliki nilai ID yang sama dengan nilai parameter yang diterima dari URL.

Menangani Not Found

1. Membuat halaman Not Found

Untuk membuat halaman NotFound, kita perlu membuat sebuah komponen yang menampilkan pesan bahwa halaman yang dicari tidak ditemukan. Berikut ini adalah contohnya:

function NotFound() {
  return <h1>Halaman tidak ditemukan</h1>;
}

Kode di atas akan menampilkan pesan “Halaman tidak ditemukan” pada halaman NotFound.

2. Menangani URL yang tidak ditemukan

jika kita memiliki pola URL yang tidak ditemukan, maka kita perlu menampilkan halaman NotFound. Untuk itu, kita dapat menambahkan Route dengan pola URL "" di dalam komponen Switch. Pola URL “” akan cocok dengan setiap URL yang tidak memiliki pola yang sesuai dengan pola URL lain yang telah ditentukan. Berikut ini adalah contohnya:

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
        <Route path="*">
          <NotFound />
        </Route>
      </Switch>
    </Router>
  );
}

Kode di atas akan menampilkan halaman NotFound jika URL yang dimasukkan tidak cocok dengan pola URL yang telah ditentukan.

Redirecting

1. Mengarahkan pengguna ke halaman lain dengan Redirect

Jika kita ingin mengarahkan pengguna ke halaman lain setelah melakukan suatu tindakan, kita dapat menggunakan komponen Redirect dari React Router. Berikut ini adalah contohnya:

import { Redirect } from "react-router-dom";

function Login(props) {
  const { isLoggedIn } = props;

  if (isLoggedIn) {
    return <Redirect to="/dashboard" />;
  }

  return (
    // ...
  );
}

Kode di atas akan mengarahkan pengguna ke halaman “/dashboard” jika pengguna sudah berhasil login.

2. Menggunakan Redirect untuk melindungi halaman

Jika kita ingin melindungi halaman tertentu dari akses pengguna yang belum login, kita dapat menggunakan komponen Redirect pada halaman tersebut. Berikut ini adalah contohnya:

import { Redirect, Route } from "react-router-dom";

function PrivateRoute({ isLoggedIn, children, ...rest }) {
  return (
    <Route {...rest}>
      {isLoggedIn ? (
        children
      ) : (
        <Redirect to={{ pathname: "/login", state: { from: rest.location } }} />
      )}
    </Route>
  );
}

Kode di atas akan mengarahkan pengguna ke halaman “/login” jika pengguna belum berhasil login. Setelah pengguna berhasil login, maka pengguna akan diarahkan kembali ke halaman yang sebelumnya diakses.

Ringkasan singkat penggunaan React Router

React Router adalah sebuah library untuk melakukan routing pada aplikasi React. Dengan React Router, kita dapat membuat aplikasi yang lebih kompleks dengan navigasi yang mudah dan cepat. Untuk menggunakan React Router, kita perlu menginstall library tersebut menggunakan npm dan mengimpor komponen yang diperlukan. Selanjutnya, kita dapat membuat routing sederhana atau kompleks dengan menentukan pola URL dan komponen yang akan ditampilkan pada halaman tersebut. React Router juga mendukung fitur seperti parameter, NotFound, dan Redirecting.

Tips dan saran untuk penggunaan React Router

Selalu gunakan komponen Switch untuk mengatur tampilan halaman.
Gunakan komponen Link untuk melakukan navigasi antar halaman.
Gunakan komponen Redirect untuk mengarahkan pengguna ke halaman lain setelah melakukan tindakan atau untuk melindungi halaman tertentu dari akses pengguna yang belum login.
Gunakan pola URL yang mudah dipahami dan konsisten pada seluruh halaman.
Gunakan parameter pada URL untuk menampilkan data yang spesifik pada halaman.
Jangan lupa menambahkan halaman NotFound agar pengguna tidak bingung saat URL yang dimasukkan tidak cocok dengan pola URL yang telah ditentukan.

Referensi

React Router. (n.d.). Getting Started. Retrieved from https://reactrouter.com/web/guides/quick-start
React Router. (n.d.). API Documentation. Retrieved from https://reactrouter.com/web/api
W3Schools. (n.d.). React Router. Retrieved from https://www.w3schools.com/react/react_router.asp

Kita telah selesai membahas tentang React Router, sebuah library untuk melakukan routing pada aplikasi React. Dalam artikel ini, telah dijelaskan tentang pengertian dan kebutuhan React Router, cara menginstall React Router, penggunaan React Router untuk membuat routing sederhana dan kompleks, menangani parameter, NotFound, dan Redirecting. Artikel ini juga memberikan tips dan saran untuk penggunaan React Router secara efektif.