Materi React Routing

🧭 1. Persiapan Awal

Pastikan sudah:

• Install Node.js
• Bisa jalankan React
• Sudah punya project React (misalnya pakai create-react-app atau vite)

Buat project baru sebagai latihan routing (htdocs):

npx create-react-app namakalian-rt
cd namakalian-rt
npm install bootstrap

📦 2. Install React Router

Buka terminal di folder project, lalu ketik:

npm install react-router-dom

📁 3. Buat Halaman (Pages)

Di dalam folder src, buat folder baru: pages

Lalu buat 3 file:

Home.jsx

function Home() {
  return <h1>Ini Halaman Home</h1>;
}
export default Home;

About.jsx

function About() {
  return <h1>Ini Halaman About</h1>;
}
export default About;

Contact.jsx

function Contact() {
  return <h1>Ini Halaman Contact</h1>;
}
export default Contact;

🔗 4. Atur Routing di App.js

Buka file App.js, lalu ubah jadi seperti ini:

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

🔘 5. Tambahkan Navigasi (Menu)

Supaya bisa pindah halaman tanpa reload, pakai Link.

Edit lagi App.js:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | 
        <Link to="/about">About</Link> | 
        <Link to="/contact">Contact</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

▶️ 6. Jalankan Project

npm start

Buka browser:

• / → Home
• /about → About
• /contact → Contact

🧠 Penjelasan Singkat

• BrowserRouter → mengaktifkan routing
• Routes → tempat semua route
• Route → menentukan halaman
• Link → pindah halaman tanpa reload

🎯 Tips Supaya Mudah Dipahami

• Anggap route = jalan
• Anggap page = tujuan
• Jadi /about = jalan ke halaman About