Bikin Halaman Tanpa Reload - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Kenapa Harus Tanpa Reload?

Di dunia website tradisional, setiap kali kita berpindah halaman, browser akan me-reload seluruh halaman dari awal. Ini seperti kamu harus keluar rumah setiap kali ingin pindah dari ruang tamu ke dapur!

Tapi tenang, dengan React, kita bisa bikin halaman berubah tanpa reload, alias Single Page Application (SPA). Hasilnya?

• Lebih cepat  karena hanya bagian yang berubah yang diperbarui.
• Lebih smooth karena tidak ada kedipan reload.
• Lebih hemat bandwidth karena tidak perlu mengunduh ulang semua aset.

2. React Router: Jalan Tol Tanpa Macet!

Untuk membuat navigasi tanpa reload di React, kita pakai React Router. Ini adalah library khusus untuk menangani routing di aplikasi React.

2.1. Instal React Router

Kalau kamu belum punya, install dulu dengan perintah ini:

npm install react-router-dom

2.2. Buat Halaman-Halaman

Kita buat beberapa halaman sederhana dulu:

Home.js

const Home = () => {
  return <h1>Selamat datang di halaman Home!</h1>;
};
export default Home;

About.js

const About = () => {
  return <h1>Ini halaman About, kenalan yuk!</h1>;
};
export default About;

2.3. Setup Router di App.js

Sekarang kita pasang router di dalam aplikasi kita.

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

 Voila! Sekarang kalau kamu klik link "Home" atau "About", halaman akan berubah tanpa reload!

3. Redirect & Navigasi Dinamis

Kadang kita butuh mengarahkan user ke halaman lain setelah aksi tertentu. Untuk ini, kita bisa pakai useNavigate.

import { useNavigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    alert("Login sukses!");
    navigate("/");
  };

  return <button onClick={handleLogin}>Login</button>;
};

Setelah login sukses, pengguna langsung diarahkan ke halaman Home tanpa reload!

4. Kesimpulan

 Dengan React Router, kita bisa membuat aplikasi multi-halaman tanpa reload.  Pakai <Routes> dan <Route> untuk menentukan halaman.  Gunakan <Link> untuk berpindah halaman tanpa reload.  Pakai useNavigate() untuk navigasi dinamis.

Sekarang kamu sudah bisa bikin SPA (Single Page Application) yang smooth dan cepat!