1o1 React Js : Berkenalan dengan react-router-dom

Jika anda bertanya seperti apa website yang modern itu? Jawabannya tentu saja adalah web yang menggunakan single page application a.k.a SPA. Pada intinya SPA memungkinkan kita melakukan perpindahan page di sisi client (browser) tanpa mendownload ulang asset-asset dari server seperti file-file javascript dan css. Lalu bagaimana library yang terkenal seperti React menyediakan fitur routing nya? Ok, mari kita bahas.

Kali ini saya akan menggunakan library react-router-dom yang merupakan pembaharuan dari react-router atau bisa juga disebut dengan react-router versi 4. Jadi, ini adalah versi terbaru dari react-router (setidaknya untuk saat ini).

Pertama-tama yang harus dilakukan adalah pastikan anda mempunyai project react (tentu saja). Sebagai contoh, saya di disini mempunyai project baru yang di generate dengan tool create-react-app.

├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── README.md
└── src
├── App.css
├── App.js
├── App.test.js
├── components
│ └── common
│ └── Navbar.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js
4 directories, 13 files

Dan, berikut ini penampakan package.json dari project diatas

{
“name”: “101react”,
“version”: “0.1.0”,
“private”: true,
“dependencies”: {
“bootstrap”: “³.3.7”,
“react”: “¹⁵.5.4”,
“react-dom”: “¹⁵.5.4”,
“react-router-dom”: “⁴.1.1”
},
“devDependencies”: {
“react-scripts”: “1.0.6”
},
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test — env=jsdom”,
“eject”: “react-scripts eject”
}
}

Sekilas tentang react-router-dom

Pada dasarnya, react-router-dom mempunyai 2 jenis router yang dapat kita gunakan, yaitu HashRouter dan BrowserRouter. Keduanya mempunyai kegunaan masing-masing tergantung dari jenis Web apa yang akan kita buat. Seperti contoh, jika kita ingin membuat sebuah web yang static atau tidak ada server untuk me-render data yang dinamis, maka sebaiknya kita menggunakan HashRouter. Sebaliknya, jika kita membuat web yang menggunakan data dinamis dengan server backend, maka menggunakan BrowserRouter adalah pilihan tepat. Pada artikel kali ini saya akan menggunakan BrowserRouter karena kemungkinan di tutorial selanjutnya akan ada proses menggunakan data dari server.

Apa yang akan kita buat?

Untuk contoh tutorial kali ini, saya akan membuat sebuah web static. Katakanlah ini adalah project untuk sebuah rental mobil yang terdiri dari 3 halaman yaitu HomePage, CarsPage dan AboutPage dengan route masing-masing sebagai berikut:

“/” → HomePage
“/cars” → CarsPage
“/about” → AboutPage

Config di method ReactDom.render

Seperti yang kita ketahui, React menggunakan method ReactDom.render() untuk me-render root component kita ke dalam DOM, kode tersebut terdapat di index.js. Yang harus kita lakukan untuk memasang router adalah dengan me-wrap root component kita dengan BrowserRouter seperti berikut:

import {BrowserRouter} from ‘react-router-dom’;

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById(‘root’));

Ya, config nya hanya segitu saja, sangat mudah bukan? Selanjutnya kita akan mendefinisikan route sesuai dengan halaman-halaman yang telah kita rancang, tapi sebelumnya kita perlu membuat component nya terlebih dahulu.

Membuat Pages Component

Berikut component untuk halaman-halaman yang ada di project ini.

./src/components/home/HomePage.js

import React, {Component} from ‘react’;
class HomePage extends Component{
render(){
return (<div>
<div className=”container”>
<div className=”jumbotron”>
<h1>Auto rentcar</h1>
</div>
</div>
</div>)
}
}
export default HomePage;

./src/components/home/AboutPage.js

import React, {Component} from ‘react’;
class AboutPage extends Component{
render(){
return (<div>
<div className=”container”>
<div className=”jumbotron”>
<h1>About Page</h1>
</div>
</div>
</div>)
}
}
export default AboutPage;

./src/components/cars/CarsPage.js

import React, {Component} from 'react';
class HomePage extends Component{
render(){
return (<div>
<h2>Cars table</h2>
<table className="table table-bordered">
<thead>
<tr>
<th>Brand</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mitsubishi</td>
<td>Pajero sport</td>
<td>Rp.1jt</td>
</tr>
<tr>
<td>Toyota</td>
<td>Fortuner</td>
<td>Rp.1jt</td>
</tr>
</tbody>
</table>
</div>)
}
}
export default HomePage;

Membuat Navbar header dengan Link

Selayaknya sebuah halaman web, kita perlu sebuah Navbar untuk dijadikan navigasi (link di header web). Saya akan membuat navbarnya di src/components/common. React-router-dom mempunyai sebuah component untuk mendefinisikan anchor ke url page yang dituju yaitu component Link. Jadi, jika anda ingin membuat link untuk menuju ke path tertentu, anda hanya perlu menggunakan Link seperti berikut:

<Link to=”/blabla” /> Link menuju ke component BlaBla </Link>

Anda bisa menganggap Link ini sebagai pengganti tag <a> pada html, kelebihannya Link ini menghubungkan langsung anchor kita ke config router di root component yang akan kita buat.

./src/components/common/Navbar.js

import React, {Component} from ‘react’;
import {Link} from ‘react-router-dom’;
class Navbar extends Component {
render(){
return (<div>
<nav className=”navbar navbar-default”>
<div className=”container-fluid”>
<div className=”navbar-header”>
<Link className=”navbar-brand” to=”/”>101React</Link>
</div>
<ul className=”nav navbar-nav”>
<li><Link to=”/cars”>Cars</Link></li>
<li><Link to=”/about”>About</Link></li>
</ul>
</div>
</nav>
</div>)
}
}
export default Navbar;

Menggunakan Route di root component

Untuk meng-implementasikan routing di root component, react-router-dom telah menyedianan component Route dengan parameter path dan component. Sebagai contoh ketika kita akan mendefinisikan sebuah url untuk component tertentu, kita hanya perlu membuat sebuah path seperti berikut:

<Route path=”/blabla” component={BlaBlaComponent} />

Anda telah selesai, ya, sesimple itu saja. Namun, anda mungkin akan merasa aneh jika telah mendeskirpsikan beberapa Route di sini, seperti contoh berikut:

<Route path=”/” component={HomeComponent} />
<Route path=”/foo” component={FooComponent} />
<Route path=”/bar” component={BarComponent} />

Pada deretan route-route diatas jika kita masuk ke “/foo” atau “/bar”, maka HomeComponent tetap akan tampil. Ini dikarenakan “/foo” dan “/bar” masih termasuk ke dalam pattern “/” sehingga setiap url kita terdapat pada pattern “/” maka HomeComponent pasti akan muncul. Untuk mengatasi hal tersebut, kita dapat menggunakan properti exact seperti berikut

<Route exact path=”/” component={HomeComponent} />

Dengan begini maka HomeComponent hanya akan tampil jika url kita berada di “/” dengan url yang identik.

Menggunakan Switch

Lalu bagaimana jika pattern dari url nya adalah berupa parameter? Jika kita punya dua buah Route seperti berikut ini

<Route exact path=”/cars” component={CarsComponent} />
<Route path=”/cars/:id” component={CarComponent} />

Route diatas bisa kita bilang sebagai route bersarang (nested). Kita dapat membuat kedua route tersebut menjadi sebuah group dengan menggunakan component Switch seperti berukit ini:

<Switch>
<Route exact path=”/cars” component={CarsComponent} />
<Route path=”/cars/:id” component={CarComponent} />
</Switch>

Switch akan memeriksa patter yang benar2 cocok dengan path dari route tersebut dan hanya akan menampilkan 1 dari kedua component. Jadi ketika Switch menemukan path yang cocok, maka Switch akan mengabaikan path yang lainnya.

Menggunakan parameter

Kita dapat menggunakan parameter pada route seperti berikut ini:

<Route path=”/foo/:name” component={FooComponent} />

Untuk mendapatkan nilai name di dapal FooComponent, kita dapat mengambilnya di props.match.params.name

class FooComponent extends Component {
constructor(props){
super(props);
this.name = props.match.params.name;
}
 render() {
return (
<div>
{this.name}
</div>
);
}
}
export default FooComponent;

Berikut ini contoh Route yang ada di root component App.js

import React, { Component } from ‘react’;
import {Route, Switch} from ‘react-router-dom’;
import Navbar from ‘./components/common/Navbar’;
import HomePage from ‘./components/home/HomePage’;
import AboutPage from ‘./components/about/AboutPage’;
import CarsPage from ‘./components/cars/CarsPage’;
class App extends Component {
render() {
return (
<div className=”container”>
<Navbar />
<Route exact path=”/” component={HomePage} />
<Route path=”/cars” component={CarsPage} />
<Route path=”/about” component={AboutPage} />
</div>
);
}
}
export default App;

Kesimpulan

React adalah sebuah library yang sangat powerfull dan dengan pembaharuan react-router versi 4 ini, membuat sebuah routing page menjadi sangat mudah. Selanjutnya ada dapat membuat lebih banyak web app dengan menggunakan React.

Demikian tutorial singkat mengenai react-router versi4. Anda dapat mengambil source code lengkapnya di link github berikut ini

Terima kasih, Semoga bermanfaat.