Routing adalah salah satu hal penting dalam pembuatan aplikasi web dengan React. Routing digunakan untuk mengatur alur aplikasi dan membuat halaman-halaman terpisah dalam aplikasi. Dengan routing, kita dapat membuat aplikasi yang lebih interaktif dan mudah dipahami oleh pengguna. Dalam artikel ini, kita akan membahas cara membuat routing di React dengan menggunakan React Router DOM.
Install Package React Router DOM
Untuk membuat routing di React kita membutuhkan package yaitu React Router Dom. Gunakan perintah berikut untuk menginstall React Router DOM:
npm install react-router-dom
Membuat Component
Langkah selanjutnya, yaitu membuat component-component yang akan kita gunakan sebagai halaman. Dalam hal ini, kita akan membuat tiga halaman: Home, Portofolio dan Blog.
Home.js
const Home = () => {
return (
Home
);
};
Portofolio.js
const Portofolio = () => {
return (
Portofolio
);
};
export default Portofolio;
Blog.js
const Blog = () => {
return (
Blog
);
};
export default Blog;
Mengimpor Component
Setelah membuat component halaman, selanjutnya kita akan membuat routing pada App.js. Dalam App.js kita akan menggunakan BrowserRouter sebagai root dari routing. Kita juga akan menggunakan Route untuk menentukan path dan component yang akan ditampilkan pada halaman tertentu. Kemuadian, kita juga akan mengimpor component halaman yang sudah dibuat pada App.js
App.js
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import Portofolio from './pages/Portofolio'
import Blog from './pages/Blog'
const App = () => {
return (
);
}
export default App;
Untuk membuat link ke halaman lain, kita menggunakan component dari React Router DOM:
Portofolio
Untuk membuat halaman baru, kita menggunakan component
Pada kode di atas, path adalah URL yang akan mengarahkan kita ke halaman Portofolio dan component adalah component yang akan digunakan untuk menampilkan halaman tersebut.
Sekian, Semoga Bermanfaat!
Jangan lupa share artikel ini ke orang lain, barangkali mereka membutuhkan. Jangan sungkan hubungi kami bila ada pertanyan. Atau silahkan tinggalkan komentar di bawah dan mari kita berdiskusi.