Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara installasi dan konfigurasi React Bootstrap di dalam project React.js, yang mana fungsinya untuk membuat tampilan atau user interface dengan lebih mudah.
Dan di artikel kali ini kita semua akan belajar bersama-sama bagaimana cara membuat route di dalam project React.js. Dimana route yang akan kita buat akan bersifat SPA atau single page application, yang artinya saat berpindah-pindah halaman, aplikasi tidak memerlukan refresh / reload halaman. Karena route di dalam React.js hanya akan memanggil component -nya saja.
Langkah 1 - Installasi Library react-router-dom
React Router Dom merupakan library di dalam React.js yang digunakan untuk membuat sebuah route atau navigasi dengan mudah dan cepat serta menerapkan konsep SPA atau single page application.
Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project React.js.
npm install react-router-dom@5.2.0
Jika perintah di atas berhasil dijalankan, maka kita bisa memverifikasi apakah library tersebut berhasil terinstall di dalam project React.js. Silahkan cek di dalam file package.json dan dibagian dependencies, maka akan terdapat kurang lebih seperti berikut ini :
"dependencies": {
...
"react-router-dom": "^5.2.0",
...
},
Yang artinya library tersebut telah berhasil diinstall di dalam project React.js.
Langkah 2 - Membuat Halaman / Component Home
Sekarang kita akan lanjutkan membuat sebuah halaman / component yang nanti dipanggil di dalam route. Silahkan buat folder baru dengan nama pages di dalam folder src. Dan di dalam folder pages, silahkan buat file baru dengan nama Home.js, kemudian masukkan kode berikut ini :
//import component Bootstrap React
import { Card, Container, Row, Col , Button } from 'react-bootstrap'
function Home() {
return (
<Container className="mt-3">
<Row>
<Col md="{12}">
<Card className="border-0 rounded shadow-sm">
<Card.Body className="p-4">
<h1>EXPRESS.JS + VUE.JS</h1>
<p class="lead">Tutorial FullStack Express.js dan React.js oleh <strong>SantriKoding.com</strong></p>
<Button href="http://santrikoding.com" target="_blank" variant="primary" size="lg">SELENGKAPNYA</Button>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}
export default Home;
Dari penambahan kode di atas, pertama kita import beberapa component yang ada di dalam React Bootstrap, seperti Card, Container, Row dan lain-lain.
//import component Bootstrap React
import { Card, Container, Row, Col , Button } from 'react-bootstrap'
Kemudian kita membuat component ini dengan jenis function component.
function Home() {
//...
}
Dan di dalamnya kita melakukan return menggunakan JSX yang isinya adalah kode-kode HTML dan component dari React Bootstrap.
//return dengan JSX syntax
return (
//...
)
INFORMASI PENTING ! : di dalam JSX, untuk menuliskan attribute class di dalam HTML diganti menjadi className.
teman-teman dapat mempelajari lebih banyak tentang JSX di halaman berikut ini : https://reactjs.org/docs/introducing-jsx.html
Setelah itu, agar component ini dapat di import di halaman lain, maka kita perlu melakukan export.
export default Home;
Langkah 3 Membuat Halaman / Component Posts
Setelah berhasil membuat halaman / component untuk Home, sekarang kita lanjutkan membuat 3 component lagi yang nantinya digunakan untuk proses menampilkan, insert dan edit data post.
Silahkan buat folder baru dengan nama posts di dalam folder src/pages. Dan di dalam folder posts, silahkan buat 3 file baru, yaitu :
-
Index.js
-
Create.js
-
Edit.js
Jika sudah membuat 3 file di atas, sekarang kita akan memberikan sample kode di dalamnya, dimana nanti kita akan ubah di pembahasan selanjutnya.
Silahkan buka file src/pages/posts/Index.js dan masukkan kode berikut ini :
//import component Bootstrap React
import { Card, Container, Row, Col } from 'react-bootstrap'
function IndexPost() {
return (
<Container className="mt-3">
<Row>
<Col md="{12}">
<Card className="border-0 rounded shadow-sm">
<Card.Body>
HALAMAN INDEX POST
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}
export default IndexPost;
Selanjutnya, buka file src/pages/posts/Create.js dan masukkan kode berikut ini :
//import component Bootstrap React
import { Card, Container, Row, Col } from 'react-bootstrap'
function CreatePost() {
return (
<Container className="mt-3">
<Row>
<Col md="{12}">
<Card className="border-0 rounded shadow-sm">
<Card.Body>
HALAMAN CREATE POST
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}
export default CreatePost;
Terakhir, silahkan buka file src/pages/posts/Edit.js dan ubah kode-nya menjadi seperti berikut ini :
//import component Bootstrap React
import { Card, Container, Row, Col } from 'react-bootstrap'
function EditPost() {
return (
<Container className="mt-3">
<Row>
<Col md="{12}">
<Card className="border-0 rounded shadow-sm">
<Card.Body>
HALAMAN EDIT POST
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}
export default EditPost;
Langkah 4 - Konfigurasi Router di React.js
Setelah membuat beberapa halaman / component, sekarang kita lanjutkan membuat konfigurasi route-nya, dimana nanti setiap route yang dibuat akan memanggil component yang sudah kita buat di atas sebelumnya.
Silahkan buka file src/App.js, kemudian ubah kode-nya menjadi seperti berikut ini :
//import component Bootstrap React
import { Navbar, Container, Nav } from 'react-bootstrap'
//import react router dom
import { Switch, Route, Link } from "react-router-dom";
//import component Home
import Home from './pages/Home'
//import component Post Index
import PostIndex from './pages/posts/Index'
//import component Post Create
import PostCreate from './pages/posts/Create'
//import component Post Edit
import PostEdit from './pages/posts/Edit'
function App() {
return (
<div>
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Brand to="/">EXPRESS.JS + REACT.JS</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={Link} to="/" className="nav-link">HOME</Nav.Link>
<Nav.Link as={Link} to="/posts" className="nav-link">POSTS</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/posts" component={PostIndex} />
<Route exact path="/posts/create" component={PostCreate} />
<Route exact path="/posts/edit/:id" component={PostEdit} />
</Switch>
</div>
);
}
export default App;
Dari perubahan kode di atas, pertama kita melakukan import beberapa component dari React Bootstrap.
//import component Bootstrap React
import { Navbar, Container, Nav } from 'react-bootstrap'
Setelah itu, kita import beberapa hook yang ada di dalam React Router Dom.
//import react router dom
import { Switch, Route, Link } from "react-router-dom";
Dan kita juga mengimport beberapa halaman / component yang sudah kita buat sebelumnya, yaitu Home, Post Index, Post Create dan Post Edit.
//import component Home
import Home from './pages/Home'
//import component Post Index
import PostIndex from './pages/posts/Index'
//import component Post Create
import PostCreate from './pages/posts/Create'
//import component Post Edit
import PostEdit from './pages/posts/Edit'
Setelah itu, kita membuat konfigurasi route kurang lebih seperti berikut ini :
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/posts" component={PostIndex} />
<Route exact path="/posts/create" component={PostCreate} />
<Route exact path="/posts/edit/:id" component={PostEdit} />
</Switch>
Dalam contoh pendefinisian route di atas, pertama adalah path, yang mana merupakan URL yang akan digunakan di dalam route tersebut dan component adalah component yang akan di render saat route tersebut dipanggil.
Langkah 5 - Melakukan Render Route
Terakhir, kita akan menambahkan sedikit kode yang bertujuan agar dari route yang sudah kita buat di atas dapat di render di dalam web browser.
Silahkan buka file src/index.js, kemudian ubah semua kode-nya menjadi seperti berikut ini :
import React from 'react';
import ReactDOM from 'react-dom';
//import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
//BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
Dari penambahan kode di atas, pertama kita import hook BrowserRouter dari React Router Dom.
//BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';
Setelah itu, kita gunakan hook BrowserRouter tersebut untuk membungkus component atau file App.
<BrowserRouter>
<App />
</BrowserRouter>
Karena konfigurasi route yang kita buat berada di dalam file App tersebut.
Dan sekarang, jika kita reload project React.js, maka akan mendapatkan hasil kurang lebih seperti berikut ini :
Silahkan bisa klik menu-menu yang ada dan tentunya akan berjalan secara SPA atau single page application.
Dan sampai disini pembahasan bagaimana cara membuat konfigurasi route di dalam project React.js. Di artikel selanjutnya kita semua akan belajar bagaimana cara menampilkan data dari Rest API yang kita buat di Express.js ke dalam project React.js.
Terima Kasih