ReactJS – Pengenalan Routing

Bagaimana caranya kita berpindah dari satu halaman ke halaman lain?

Sebagai contoh kita memiliki satu halaman untuk menampilkan semua produk yang ada, dan satu halaman lain untuk menampilkan detail produknya. Ketika user klik pada produk, maka akan tampil detail produk. Mekanisme ini disebut Routing.

Pada React dikenal istilah Single Page Application (SPA) yang hanya menggunakan satu file untuk menampilkan apa yang user inginkan. Sederhananya React akan membaca parameter pada URL kemudian menampilkan komponen yang sesuai dengan path URLnya. Kita akan melanjutkan dengan menginstal package React Router

npm install react-router-dom

Sebelum lanjut masalah routing, saya jelaskan dulu tentang Path URL, misalnya kalian punya domain http://www.domain.com/ nah dibelakang / itu namanya path, walaupun dibelakangnya / itu kosong, tetap path, lebih tepatnya default path

Cukup tentang path, kita buat dulu halaman home kita seperti kode dibawah

import React from 'react';

function Home() {
  return <div>Home</div>;
}

export default Home;

selanjutnya pada kita akan memodifikasi App.js

Pertama kita import createBrowserRouter dari package react-router-dom

import { createBrowserRouter } from 'react-router-dom';

ini adalah function yang disediakan oleh react-router-dom yang memungkinkan kita untuk membuat routing pada aplikasi kita.

Selanjutnya kita buat dulu konstanta routingnya dengan memanggil createBrowserRouter. Didalam createBrowserRouter kita akan isikan array dari object route’nya. satu object merepresentasikan satu route.

const router = createBrowserRouter([{},{}])

lalu tambahkan property untuk mendefinisikan route’nya. Saat ini saya ingin menambahkan route ketika path yang diminta adalah default path, atau / kosong.

const router = createBrowserRouter([
    { path: '/', element: <Home /> },
  ]);

selanjutnya kita perlu memberi tahu react, kalo kita perlu merender si router. Untuk itu kita perlu import RouterProvider dari package react-router-dom. Lalu kita panggil RouterProvider di App.js. Koding lengkapnya seperti dibawah

import React from 'react';
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';
import Home from './pages/Home';

function App() {
  const router = createBrowserRouter([
    { path: '/', element: <Home /> },
  ]);
  return <RouterProvider router={router} />;
}

export default App;