Apa itu Routing di React?

Routing di React mengacu pada cara mengelola navigasi antara berbagai tampilan atau halaman dalam aplikasi satu halaman (SPA). Dengan routing, Anda dapat membuat aplikasi yang memungkinkan pengguna untuk berpindah antara berbagai tampilan tanpa memuat ulang halaman sepenuhnya.

Langkah-Langkah Menggunakan Routing di React

1. Install React Router: React Router adalah pustaka routing untuk React yang memungkinkan Anda mengelola navigasi dalam aplikasi.

2. Setup Router: Konfigurasikan router di aplikasi dengan menentukan rute dan komponen yang akan dirender untuk masing-masing rute.

3. Buat Rute: Tentukan rute untuk berbagai tampilan atau halaman di aplikasi Anda.

4. Buat Link: Gunakan komponen Link untuk menavigasi antara rute tanpa memuat ulang halaman.

Struktur Folder

Berikut adalah struktur folder umum untuk aplikasi React yang menggunakan routing:

/src
  /components
    - Home.js
    - About.js
    - Contact.js
    - Navigation.js
  /pages
    - HomePage.js
    - AboutPage.js
    - ContactPage.js
  - App.js
  - index.js

Contoh Implementasi Routing di React

1. Install React Router

Jalankan perintah berikut untuk menginstal React Router:

npm install react-router-dom

2. Setup Router

src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

3. Buat Rute

src/App.js:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';
import Navigation from './components/Navigation';

function App() {
  return (
    <div>
      <Navigation />
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
      </Switch>
    </div>
  );
}

export default App;

4. Buat Link Navigasi

src/components/Navigation.js:

import React from 'react';
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

export default Navigation;

5. Buat Halaman

src/pages/HomePage.js:

import React from 'react';

function HomePage() {
  return <h1>Home Page</h1>;
}

export default HomePage;

src/pages/AboutPage.js:

import React from 'react';

function AboutPage() {
  return <h1>About Page</h1>;
}

export default AboutPage;

src/pages/ContactPage.js:

import React from 'react';

function ContactPage() {
  return <h1>Contact Page</h1>;
}

export default ContactPage;

Penjelasan Kode

1. Setup Router:

   • BrowserRouter membungkus aplikasi untuk memungkinkan routing.

2. Buat Rute:

   • Route digunakan untuk mendefinisikan rute dan komponen yang akan dirender.

   • Switch memastikan hanya satu Route yang dirender pada satu waktu.

3. Buat Link Navigasi:

   • Link digunakan untuk navigasi antar rute tanpa memuat ulang halaman.

4. Buat Halaman:

   • Komponen halaman (HomePage, AboutPage, ContactPage) dirender berdasarkan rute.

Sumber

• React Router Documentation
• React Documentation - React Router
• MDN Web Docs - React Router

Routing di React dengan React Router memungkinkan Anda membuat aplikasi satu halaman dengan navigasi yang mulus. Struktur folder yang disarankan dan contoh kode di atas memberikan dasar yang baik untuk memulai dengan routing di aplikasi React Anda.