Tutorial ReactJS #6 : React Router pada ReactJS

React Router adalah sebuah library yang digunakan dalam aplikasi React untuk membuat routing dan navigasi antar halaman. Dengan React Router kita dapat membuat sebuah aplikasi web yang memiliki banyak halaman dengan URL yang berbeda-beda. React Router membantu kita untuk mengatur halaman-halaman tersebut dan memastikan bahwa setiap halaman ditampilkan dengan tepat.

Tanpa React Router, aplikasi React yang memiliki banyak halaman akan menjadi sangat sulit untuk dikelola. Kita harus membuat komponen untuk setiap halaman dan memastikan bahwa setiap komponen ditampilkan pada URL yang tepat. Dengan menggunakan React Router, kita dapat memisahkan logika routing dari logika komponen sehingga kita dapat fokus pada pengembangan aplikasi itu sendiri. React Router merupakan salah satu alat yang sangat berguna untuk mengelola rute dan navigasi dalam aplikasi web React.

Beikut langkah-langkah membuat Roter pada ReactJs :

1. Membuat Proyek React

Jika belum memiliki proyek React yang ada, kita dapat membuatnya dengan menggunakan Create React App atau alat serupa. Buka terminal/CMD dan jalankan perintah berikut untuk membuat proyek baru:

npx create-react-app namaproject

atau :

npm create-react-app namaproject

2. Install React Router menggunakan npm

Untuk menginstall React Router kita dapat menggunakan npm (Node Package Manager), dengan langkah-langkahnya :

• • Buka terminal atau command prompt pada komputer Anda.
  • Ketikkan perintah berikut: npm install react-router-dom
  • Tunggu hingga proses instalasi selesai.

 

3. Membuat Komponen

Sekarang, mari buat beberapa komponen yang akan kita gunakan dalam tutorial ini. Buat folder Components di dalam folder src dan buat tiga komponen: Home_component.js, About_component.js, dan Contact_component.js, setiap komponen hanya akan menampilkan teks sederhana.

Home_component.js :

// Home.js
import React from 'react';

function Home() {
    return (
        <div>
            <h1>Halaman Beranda</h1>
            <p>Selamat datang di halaman beranda!</p>
        </div>
    );
}

export default Home;

 

About_component.js :

// About.js
import React from 'react';

function About() {
    return (
        <div>
            <h1>Tentang Kami</h1>
            <p>Ini adalah halaman tentang kami.</p>
        </div>
    );
}

export default About;

 

Contact_component.js :

// Contact.js
import React from 'react';

function Contact() {
    return (
        <div>
            <h1>Kontak Kami</h1>
            <p>Anda dapat menghubungi kami di sini.</p>
        </div>
    );
}

export default Contact;

 

 

4. Membuat Halaman

Sekarang, mari buat beberapa halaman yang akan kita gunakan untuk menampilkan halaman dari alamat yang kita akses. Buat folder Pages di dalam folder src dan buat 3 file halaman : Home.js, About.js, dan Contact.js, setiap komponen hanya akan menampilkan teks sederhana.

Home.js

import Home_component from "../Components/Home_component";

const Home = () => {
    return(
        <Home_component/>
    )
}

export default Home;

 

About.js

import About_component from "../Components/About_component";

const About = () => {
    return(
        <About_component/>
    )
}

export default About;

 

Contact.js

import Contact_component from "../Components/Contact_component";

const Contact = () => {
    return(
        <Contact_component/>
    )
}

export default Contact;

 

 

5. Menggunakan React Router

Sekarang kita akan mengintegrasikan React Router ke dalam proyek kita. Dalam komponen ‘App.js‘, kita akan menentukan rute-rute yang akan digunakan dalam aplikasi kita.

Setelah React Router terinstall, kita perlu mengimpor library tersebut pada file aplikasi kita, misal pada file App.js, berikut ini adalah contohnya :

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

 

App.js :

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import Home from './Pages/Home';
import About from './Pages/About'; // Perbaiki path ini
import Contact from './Pages/Contact'; // Perbaiki path ini

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

export default App;

 

5. Menjalankan Aplikasi

Sekarang kita dapat menjalankan aplikas dengan menjalankan perintah berikut :

npm start

Aplikasi React kita akan berjalan, dan kita bisa mengakse Halaman Beranda dengan alamat http://localhost:3000/, Tentang Kami dengan alamat http://localhost:3000/about, dan Kontak Kami dengan alamat http://localhost:3000/contact.

Ini adalah dasar dari penggunaan React Router untuk mengelola rute dalam aplikasi React kita. Kita dapat menggabungkan lebih banyak fitur seperti rute bersarang, rute dengan parameter, dan banyak lagi sesuai kebutuhan proyek kita. Jangan lupa untuk memeriksa dokumentasi resmi React Router (https://reactrouter.com) untuk informasi lebih lanjut.

 

 

Navigasi dengan menggunakan Link

Untuk membuat navigasi antar halaman pada aplikasi React, kita dapat menggunakan komponen Link dari React Router. Untuk membuatnya, kita buat file baru di dalam folder Pages dengan nama Navbar.js, dengan sintak seperti berikut :

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

function Navbar() { 
  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 Navbar;

Selanjutnya kita panggil Navbar.js tersebut di dalam App.js, sehingga file App.js menjadi seperti berikut :

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Link } from "react-router-dom"; 

import Home from './Pages/Home';
import About from './Pages/About'; // Perbaiki path ini
import Contact from './Pages/Contact'; // Perbaiki path ini
import Navbar from './Pages/Navbar';

function App() {
  return (
    <Router> 
      <Navbar/>

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

export default App;

Kode di atas akan menampilkan tautan ke halaman Home, About, dan Contact, sehingga hasilnya jadi seperti berikut :

 

 

Menangani Not Found

1. Membuat halaman Not Found

Untuk membuat halaman NotFound, kita perlu membuat sebuah halaman yang menampilkan pesan bahwa halaman yang dicari tidak ditemukan, kita buat file baru di dalam folder Pages dengan nama Notfound.js dengan sintak seperti berikut :

function NotFound() { 
    return (
        <h1>Halaman tidak ditemukan</h1>
    )
}

export default NotFound;

Kode di atas akan menampilkan pesan “Halaman tidak ditemukan” pada halaman NotFound.

 

2. Menangani URL yang tidak ditemukan

Jika kita memiliki pola URL yang tidak ditemukan, maka kita perlu menampilkan halaman NotFound. Untuk itu, kita dapat menambahkan Route dengan pola URL “*” di dalam komponen Switch. Pola URL “*” akan cocok dengan setiap URL yang tidak memiliki pola yang sesuai dengan pola URL lain yang telah ditentukan. Untuk menggunakannya ubah sintak di dalam file App.js menjadi seperti berikut :

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Link } from "react-router-dom"; 

import Home from './Pages/Home';
import About from './Pages/About'; // Perbaiki path ini
import Contact from './Pages/Contact'; // Perbaiki path ini
import Navbar from './Pages/Navbar';
import NotFound from './Pages/Notfound';

function App() {
  return (
    <Router> 
      <Navbar/>

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

export default App;

Kode di atas akan menampilkan halaman NotFound jika URL yang dimasukkan tidak cocok dengan pola URL yang telah ditentukan.

 

 

 

 

Kesimpulan :

React Router adalah sebuah library untuk melakukan routing pada aplikasi React. Dengan React Router, kita dapat membuat aplikasi yang lebih kompleks dengan navigasi yang mudah dan cepat. Untuk menggunakan React Router, kita perlu menginstall library tersebut menggunakan npm dan mengimpor komponen yang diperlukan. Selanjutnya, kita dapat membuat routing sederhana atau kompleks dengan menentukan pola URL dan komponen yang akan ditampilkan pada halaman tersebut. React Router juga mendukung fitur seperti parameter, NotFound, dan Redirecting.

 

 

Referensi :

• React Router. (n.d.). Getting Started. Retrieved from https://reactrouter.com/web/guides/quick-start
• React Router. (n.d.). API Documentation. Retrieved from https://reactrouter.com/web/api
• W3Schools. (n.d.). React Router. Retrieved from https://www.w3schools.com/react/react_router.asp
• https://www.iltekkomputer.com/menggunakan-react-router/