lifelong learner — urip iku urup, currently working on accenture.

React – router

0
Degananda.com -

Router merupakan modul yang berfungsi untuk melakukan proses navigasi pada SPA(Single page application). Berbeda dengan angular yang langsung hadir dengan package angular/router , jika kita menggunakan react maka modul router terpisah dengan modul corenya.

Persiapan

Karena router dari react terpisah dari modul corenya maka kita harus menginstall terlebih dahulu modul tersebut. Jika anda sedang menjalankan development server react maka matikan terlebih dahulu lalu menjalankan perintah npm dibawah ini untuk menginstall react router.

NB : Versi react-router yang digunakan adalah versi 4.x dan kami menggunakan create-react-app.

npm install react-router-dom --save

import BrowserRouter, route dan link dari package react-router-dom

import {
 BrowserRouter as Router,
 Route,
 Link
} from 'react-router-dom'

what will we build

Kita akan membuat navigasi sederhana dengan memanfaatkan react router. Kasusnya adalah kita akan membangun aplikasi katalog sederhana dimana user dapat berpindah – pindah secara dinamis dari satu halaman ke halaman lain. Daftar halaman yang dapat diakses oleh user adalah

  1. Home atau landingpage
  2. About, halaman untuk menampilkan informasi mengenai website tersebut.
  3. Contact, halaman yang menampilkan kontak(pemiliki atau pengelola website) yang dapat dihubungi
  4. Blog, halaman untuk menampilkan posting atau berita.

Navigasi akan diletakan pada komponen menu sehingga perpindahan dapat berasal dari halaman mana saja ke tujuan mana saja. Berikut ini adalah ilustrasi skema navigasi diatas.

dari ilustrasi diatas kita akan membuat lima buah komponen yakni :

  • komponen home
  • komponen about
  • komponen blog
  • komponen kontak
  • komponen menu

komponen menu akan dipanggil di ke empat komponen lain karena bertujuan untuk proses navigasi. Seluruh komponen hanya menampilkan tulisan berupa “hello world” a.k.a dummy. Karena tujuan dari ulasan ini adalah untuk membahas cara menggunakan react-router untuk melakukan navigasi.

Implementasi

Pada tutorial ini ke limat komponen tersebut kami letakan dalam berbeda file untuk memudahkan dalam pengelolaan data.

Pembuatan komponen

berikut ini adalah kode untuk membuat lima komponen diatas

App.js sebagai home

import React , { Component } from 'react';
import ReactDOM from 'react-dom';
import Menu from './Menu';
import {
 BrowserRouter as Router,
 Route,
 Link
} from 'react-router-dom'
import './App.css';

class App extends Component {
 constructor(props){
 super(props);

}

render() {
 return (
 <div>
 <Menu />
 <h1>Ini Home</h1>
 </div>
 );
 }
}

export default App;

Contact.js sebagai komponen contact

import React , { Component } from 'react';
import ReactDOM from 'react-dom';
import Menu from './Menu';
import './App.css';

class Contact extends Component {
 constructor(props){
 super(props);

}

render() {
 return (
 <div>
 <Menu />
 <h1>Ini contact</h1>
 </div>
 );
 }
}

export default Contact;

About.js sebagai komponen about

import React , { Component } from 'react';
import ReactDOM from 'react-dom';
import Menu from './Menu';
import './App.css';

class About extends Component {
 constructor(props){
 super(props);

}

render() {
 return (
 <div>
 <Menu />
 <h1>Ini about</h1>
 </div>
 );
 }
}

export default About;

Blog.js sebagai komponen blog

import React , { Component } from 'react';
import ReactDOM from 'react-dom';
import Menu from './Menu';
import './App.css';

class Blog extends Component {
 constructor(props){
 super(props);

}

render() {
 return (
 <div>
 <Menu />
 <h1>Ini Blog</h1>
 </div>
 );
 }
}

export default Blog;

Menu.js untuk menyimpan elemen-elemen list yang digunakan untuk menu navigasi

import React , { Component } from 'react';
import ReactDOM from 'react-dom';
import {
 Link
} from 'react-router-dom'
import './App.css';

class Menu extends Component {
 constructor(props){
 super(props);

}

render() {
 return (
 <ul>
 <li><Link to="/">Home</Link></li>
 <li><Link to="/about">About</Link></li>
 <li><Link to="/contact">Contact</Link></li>
 <li><Link to="/blog">Blog</Link></li>
 </ul>
 );
 }
}

export default Menu;

<Link> adalah syntax yang digunakan untuk melakukan navigasi pada react. Tujuan dari link tersebut didefinisikan pada attribute to={nama path}

Kemudian yang terahir pada index.js membuat router yang akan mengakomodasi skema routing yang telah kita tentukan diatas.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import About from './About';
import Blog from './Blog';
import Contact from './Contact';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
import {
 BrowserRouter as Router,
 Route,
 Link,
} from 'react-router-dom'

ReactDOM.render(
 <Router>
 <div>
 <Route exact path="/" component={App} />
 <Route path="/about" component={About} />
 <Route path="/blog" component={Blog} />
 <Route path="/contact" component={Contact} />
 </div>
 </Router>
,document.getElementById('root'));
registerServiceWorker();

sedikit penjelasan dari router diatas :

  • Exact merupakan directive yang menunjukan bahwa route tersebut merupakan default route a.k.a path yang pertama kali diakses oleh user. Dan secara default nilai dari path harus “/”.
  • Component artinnya komponen yang akan ditampilkan kepada user saat mengakses path yang didefinisikan
  • Path , url pada browser pada proses routing.

Mengapa terdapat syntax <div> daitas? karena router harus memiliki tepat satu child. <div> adalah child dari <router>. Tanpa <div> tersebut react tidak dapat mengkompile project diatas. Anda tidak harus menggunakan div tetapi juga bisa saja menggunakan syntax lain seperti <span> intinnya tergantung dari situasi dan kondisi

testing

route awal (‘/’)

route ‘/about’

route ‘/blog’

route ‘/contact’