Hallo teman-teman semuanya kembali lagi bersama dengan saya di blog kita bersama, kali ini kita akan membahas mengenai bagaimana cara menggunakan react router dom pada react js. bagi teman-teman yang belum mengetahui mengenai apa itu itu react router dom silahkan kunjungi laman resmi dengan mengklik link berikut ini https://reactrouter.com/docs/en/v6
oke tanpa berlama-lama kita langsung saja masuk ke dalam cara penggunakan react router dom, simak penjelasan berikut ini :
Langkah 1. Install React js
langkah pertama kita harus menginstall react js, untuk menginstall react js disini saya menggunakan npm
npx create-react-app belajar-react-router-dom
disini saya memberi nama projek kita ialah dengan nama belajar-react-router-dom untuk teman-teman silahkan sesuaikan dengan keinginan teman-teman sendiri
Langkah 2. Masuk ke folder aplikasi react Js
selanjutnya silahkan masuk ke dalam folder react js yang sudah kita install, lalu buka editor kesayangan teman-teman semuanya, disini saya menggunakan Visual Studio Code
Langkah 3. Install React Router Dom
selanjutnya kita akan memasang react router dom di aplikasi react Js kita, silahkan jalakan perintah berikut ini untuk menginstall library nya :
npm install react-router-dom@6
disini kita akan menginstall react router dom dengan versi 6
Jika tampilan teman-teman seperti gambar diatas maka react-router-dom telah berhasil di install
Langkah 4. Menjalankan Aplikasi React js
selanjutnya kita akan menjalankan aplikasi react js yang sudah kita install tadi, silahkan jalankan perintah berikut ini untuk menjalankan aplikasi react js
npm start
Langkah 5. Membuat routing menggunakan react-router-dom
selanjutnya kita akan membuat routing sederhana menggunakan react-router-dom yang sudah kita install tadi, silahkan buka editor kesayangan teman-teman semuanya, pastikan pada editor teman-teman semuanya sudah terbuka folder project node js kita, lihat kembali pada langkah 2
selanjutnya teman-teman buka folder src dan pilih file yang bernama index.js seperti pada gambar berikut ini :
selanjutnya kita akan import BrowserRouter dari react-router-dom silahkan copy source code dibawah ini ke dalam file index.js yang kita buka pada gambar diatas
untuk keterangan silahkan lihat pada comment diatas script mengenai fungsi dari masing-masing script yang ditambahkan diatas.
setelah kita mengimport react router dom selanjutnya kita akan membuat Halaman dan route sederhana menggunakan react-router-dom seperti berikut ini :
buka file app.js didalam folder src
selanjutnya kita akan mengganti isi dari function app() menjadi router halaman yang akan kita buat, silahkan copy source code dibawah ini lalu paste ke file app.js
// import Routes,Route.Link di dalam react-router dom
import { Fragment } from "react";
import { Routes, Route, Link } from "react-router-dom";
// function Navbar digunakan untuk membuat tombol navigasi untuk ->
// mempermudah kita dalam berganti halaman
function Navbar() {
return (
<nav>
<ul>
<li>
{/* gunakan Taq Link dari react router dom untuk pengganti taq <a /> */}
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
);
}
// function home digunakan untuk membuat halaman home / root
function Home() {
return <h1>Halaman Home</h1>;
}
// function about digunakan untuk membuat halaman default
function About() {
return <h1>Halaman About</h1>;
}
// function app digunakan untuk halaman router
function App() {
return (
// fragment berasal dari library react js, dan berfungsi untuk membungkus
banyak component
<Fragment>
{/* render Navber */}
<Navbar />
{/* membuat routes */}
<Routes>
{/* membuat router atau alur halaman */}
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Fragment>
);
}
export default App;
Nahh jika teman-teman sudah mecopy script diatas ke dalam file app.js dan sudah menyimpanya lalu kembali ke browser aplikasi react js yang sudah kita jalankan sesuai dengan langkah 4. maka tampilannya akan sebagai berikut ini
Tambahan
nahh untuk tambahan, setelah kita sudah membuat route sederhana menggunakan react-router-dom pada react js, maka selanjutnya kita akan membuat protected routes dan public routes pada react js, yang dimana dapat diartikan bahwa ada beberapa halaman yang mengharuskan untuk login akun dan ada routes yang dapat diakses oleh orang banyak tanpa harus login terlebih dahulu,, nahh gimana cara membuat routes tersebut simak penjelasan berikut ini :
Langkah 1. Membuat File ProtectedRoutes.js
pada langkah pertama disini kita akan membuat sebuah file yang nantinya akan kita gunakan sebagai elemen untuk membatasi hak akses ke halaman tertentu, silahkan copy source code dibawah ini dan pastekan ke dalam file ProtectedRoutes.js
import React from "react";
import { Outlet } from "react-router-dom";
import SignIn from "./SignIn";
// function auth digunakan untuk mengecek apakah user telah login atau tidak
function Auth() {
const user = { isLogin: false };
return user && user.isLogin;
}
function ProtectedRoutes() {
const auth = Auth();
// taq <Outlet /> berfungsi sebagai placeholder, yang dimana memaksa sistem
untuk merender child component dibawahnya
return auth ? <Outlet /> : <SignIn />;
}
export default ProtectedRoutes;
Langkah 2. Membuat halaman Login
pada langkah kedua kita akan membuat halaman Login, silahkan buat file baru dengan nama file SignIn.js , selanjutnya copy source code dibawah ini ke dalam file SignIn.js yang baru saja kita buat tadi
import React from "react";
function SignIn() {
return (
<div>
<h1>Form Login</h1>
</div>
);
}
export default SignIn;
Langkah 3. Menghubungkan Elemen ProtectedRoutes ke halaman App.js
pada langkah ketiga silahkan buka file app.js dan kita akan mengimport halaman ProtectedRoutes.js kedalamnya, untuk mempermudah silahkan copy source code dibawah ini dan pastekan ke dalam App.js
// import Routes,Route.Link di dalam react-router dom
import { Fragment } from "react";
import { Routes, Route, Link } from "react-router-dom";
import ProtectedRoutes from "./ProtectedRoutes.js";
import SignIn from "./SignIn.js";
// function Navbar digunakan untuk membuat tombol navigasi untuk ->
// mempermudah kita dalam berganti halaman
function Navbar() {
return (
<nav>
<ul>
<li>
{/* gunakan Taq Link dari react router dom untuk pengganti taq <a /> */}
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/public">Halaman Public</Link>
</li>
</ul>
</nav>
);
}
// function home digunakan untuk membuat halaman home / root
function Home() {
return <h1>Halaman Home</h1>;
}
// function about digunakan untuk membuat halaman default
function About() {
return <h1>Halaman About</h1>;
}
// function publicroutes dapat diakses tanpa harus melalui form login
function PublicRoutes() {
return <h1>Halaman Public</h1>;
}
// function app digunakan untuk halaman router
function App() {
return (
// fragment berasal dari library react js, dan berfungsi untuk
membungkus banyak component
<Fragment>
{/* render Navber */}
<Navbar />
{/* <ProtectedRoutes /> */}
{/* membuat routes */}
<Routes>
{/* Pasang Protected Routes */}
<Route element={<ProtectedRoutes />}>
{/* membuat router atau alur halaman */}
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Route>
<Route path="/public" element={<PublicRoutes />} />
</Routes>
</Fragment>
);
}
export default App;
jangan lupa save dan lihat kembali ke tampilan halaman website kita, maka akan menjadi seperti gambar dibawah ini
nahh disini kita akan mengasumsikan bahwasanya halaman home dan about harus membutuhkan login user terlebih dahulu, dan halaman public dapat diakses oleh orang banyak tanpa melakukan login terlebih dahulu, nahh silahkan anda mencoba untuk mengklik halaman public maka akan langsung masuk ke tampilan public tanpa harus melalui form login terlebih dahulu, untuk lebih jelas dapat dilihat pada gambar dibawah ini
nahh sekian cara menggunakan React Router Dom pada react js jika ada yang belum dipahami silahkan tinggalkan pesan di kolom komentar
sekian dan terimakasih...
0 Komentar