Materi Routing React + Vite

Panduan lengkap implementasi routing React Router di project Vite dengan struktur rapi dan mudah dikembangkan.

Materi ini adalah versi Vite dari konsep routing terpisah. Fokusnya: membuat struktur project yang bersih, mudah dibaca, dan siap dipakai untuk project yang lebih besar.

Cara Lebih Rapi (Routing Dipisah) di Vite

Tujuan

Supaya project React + Vite:

0. Setup Project Vite

npm create vite@latest nama-folder
cd nama-folder
npm install
npm install react-router-dom
npm run dev

Default Vite React memakai file utama main.jsx (bukan index.js).

Struktur Folder yang Disarankan

src/
|
├── components/
|   ├── Navbar.jsx
|   └── Layout.jsx
|
├── pages/
|   ├── Home.jsx
|   ├── About.jsx
|   ├── Contact.jsx
|   ├── Profile.jsx
|   └── NotFound.jsx
|
├── routes/
|   └── index.jsx
|
├── App.jsx
└── main.jsx

1. Buat File Routing

Buat file:
src/routes/index.jsx

import { Routes, Route } from "react-router-dom";
import Layout from "../components/Layout";

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

function AppRoutes() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/profile" element={<Profile />} />
      </Route>

      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default AppRoutes;

2. Hubungkan ke App.jsx

Edit src/App.jsx:

import { BrowserRouter } from "react-router-dom";
import AppRoutes from "./routes";

function App() {
  return (
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  );
}

export default App;

3. Pastikan main.jsx Memanggil App

Di Vite, file ini penting sebagai entry point aplikasi:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

4. Tambahkan Layout dan Navbar

Supaya menu muncul konsisten di semua halaman, gunakan komponen layout.

src/components/Navbar.jsx:

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

function Navbar() {
  return (
    <nav>
      <NavLink to="/">Home</NavLink>{" "}
      | <NavLink to="/about">About</NavLink>{" "}
      | <NavLink to="/contact">Contact</NavLink>{" "}
      | <NavLink to="/profile">Profile</NavLink>
    </nav>
  );
}

export default Navbar;

src/components/Layout.jsx:

import { Outlet } from "react-router-dom";
import Navbar from "./Navbar";

function Layout() {
  return (
    <>
      <Navbar />
      <hr />
      <Outlet />
    </>
  );
}

export default Layout;

5. Buat Halaman Pages

Contoh isi halaman sederhana:

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

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

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

// src/pages/Profile.jsx
function Profile() {
  return <h1>Ini Halaman Profile</h1>;
}
export default Profile;

// src/pages/NotFound.jsx
import { Link } from "react-router-dom";

function NotFound() {
  return (
    <div>
      <h1>404 - Halaman tidak ditemukan</h1>
      <Link to="/">Kembali ke Home</Link>
    </div>
  );
}
export default NotFound;

6. Penjelasan Alur

  1. main.jsx - entry point Vite
  2. App.jsx - pembungkus BrowserRouter
  3. AppRoutes - daftar semua URL halaman
  4. Layout - template umum (Navbar + Outlet)
  5. Route - mapping URL ke komponen halaman

7. Alur Sederhana

User buka URL → main.jsx → App.jsx → AppRoutes → Halaman tampil

Contoh:

8. Menjalankan dan Verifikasi

npm run dev

Buka URL berikut untuk cek hasil:

9. Troubleshooting Umum

10. Keuntungan Cara Ini

11. Catatan Deploy Singkat

🧩 Ringkasan