Cara Menggunakan React Router V6: Panduan Pemula

React Router adalah perpustakaan paling populer yang dapat Anda gunakan untuk mengimplementasikan perutean dalam aplikasi React. Ini menyediakan pendekatan berbasis komponen untuk menangani berbagai tugas perutean, termasuk navigasi halaman, parameter kueri, dan banyak lagi.

React Router V6 memperkenalkan beberapa perubahan signifikan pada algoritma perutean, untuk mengatasi kendala yang ada pada versi sebelumnya, dan memberikan solusi perutean yang lebih baik.

Memulai Perutean Menggunakan React Router V6

Untuk memulai, membuat aplikasi Bereaksi. Kalau tidak, menyiapkan proyek React menggunakan Vite. Setelah membuat proyek, lanjutkan, dan instal reaksi-router-dom kemasan.

npm install react-router-dom

Membuat Rute Menggunakan React Router

Untuk membuat rute, mulailah dengan menggabungkan seluruh aplikasi dengan a BrowserRouter komponen. Perbarui kode di Anda indeks.jsx atau main.jsx mengajukan sebagai berikut:

import React 





instagram viewer

from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(



 </Router>
 </React.StrictMode>,
)

Memadukan komponen Aplikasi dengan komponen BrowserRouter memastikan bahwa seluruh aplikasi mendapatkan akses ke konteks perutean dan fitur yang ditawarkan oleh pustaka React Router.

Menggunakan Komponen Rute

Setelah Anda menggabungkan aplikasi dengan komponen BrowserRouter, Anda dapat menentukan rute Anda.

Itu Rute komponen tersebut merupakan penyempurnaan dari Mengalihkan komponen yang sebelumnya digunakan oleh React Router v5. Komponen ini mendukung perutean relatif, pemeringkatan rute otomatis, dan kemampuan untuk bekerja dengan rute bersarang.

Biasanya, Anda akan menambahkan rute di tingkat tertinggi aplikasi Anda, sering kali di dalam komponen Aplikasi. Namun, Anda dapat menentukannya di lokasi lain mana pun, bergantung pada struktur proyek Anda.

Buka Aplikasi.jsx file dan ganti kode React boilerplate dengan yang berikut:

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

Konfigurasi perutean ini memetakan jalur URL tertentu ke komponen laman terkait (Dasbor dan Tentang), memastikan bahwa aplikasi merender komponen yang sesuai saat pengguna mengunjungi komponen tertentu URL.

Perhatikan elemen prop, dalam komponen Route, yang memungkinkan Anda meneruskan komponen fungsional dan bukan hanya nama komponen saja. Hal ini memungkinkan untuk meneruskan props ke rute dan komponen terkaitnya.

Dalam src direktori, buat yang baru halaman direktori, dan tambahkan dua file baru: Dasbor.jsx Dan Tentang.jsx. Silakan dan tentukan komponen fungsional dalam file ini untuk menguji rutenya.

Menggunakan createBrowserRouter untuk Menentukan Rute

Dokumentasi React Router merekomendasikan penggunaan buatBrowserRouter komponen untuk menentukan konfigurasi perutean untuk aplikasi web React. Komponen ini merupakan alternatif yang ringan BrowserRouter yang mengambil serangkaian rute sebagai argumennya.

Dengan menggunakan komponen ini, Anda tidak perlu menentukan rute dalam komponen Aplikasi. Sebagai gantinya, Anda dapat menguraikan semua konfigurasi Rute Anda di dalam indeks.jsx atau main.jsx mengajukan.

Berikut ini contoh bagaimana Anda dapat menggunakan komponen ini:

import React from'react'
import ReactDOM from'react-dom/client'
import { createBrowserRouter, RouterProvider } from"react-router-dom";
import App from'./App.jsx'
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
const router = createBrowserRouter([
 {
 path: "/",
 element: <App />,
 },
 {
 path: "/dashboard",
 element: <Dashboard />,
 },
 {
 path: "/about",
 element: <About />,
 },
]);
ReactDOM.createRoot(document.getElementById("root")).render(


 </React.StrictMode>
);

Konfigurasi perutean menggunakan buatBrowserRouter Dan Penyedia Router komponen untuk membuat sistem perutean untuk aplikasi React.

Namun, satu-satunya perbedaan dengan implementasi ini adalah, alih-alih membungkus aplikasi menggunakan komponen BrowserRouter, ia menggunakan Penyedia Router komponen untuk melewati Perute konteks ke semua komponen dalam aplikasi.

Menerapkan Rute Halaman-Tidak Ditemukan

Itu jalur prop di komponen Route membandingkan jalur yang disediakan dengan URL saat ini untuk menentukan apakah ada kecocokan sebelum merender komponen yang diperlukan.

Untuk menangani kasus ketika tidak ada rute yang cocok, Anda dapat membuat rute tertentu yang akan dikelola 404 halaman tidak ditemukan kesalahan. Menyertakan rute ini memastikan pengguna dapat menerima respons yang berarti dalam situasi ketika mereka mengakses URL yang tidak ada.

Untuk mengimplementasikan rute 404, tambahkan rute ini dalam komponen Routes:

// using the Route component
"*" element={} /> 
// using createBrowserRouter
{ path: "*", element: <NotFound />, },

Lalu, buatlah kebiasaan Tidak Ditemukan.jsx komponen dan akhirnya, menata komponen menggunakan modul CSS.

Tanda bintang (*) adalah karakter wildcard yang menangani skenario ketika tidak ada rute yang ditentukan yang cocok dengan URL saat ini.

Navigasi Terprogram Menggunakan useNavigate Hook

Itu gunakanNavigasi hook menyediakan cara terprogram untuk menangani navigasi dalam aplikasi. Kait ini sangat berguna ketika Anda ingin memicu navigasi sebagai respons terhadap interaksi atau peristiwa pengguna, seperti klik tombol atau pengiriman formulir.

Mari kita lihat cara menggunakan gunakanNavigasi kait untuk navigasi terprogram. Dengan asumsi Anda membuat Tentang.jsx komponen fungsional, impor hook dari paket React Router:

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

Kemudian tambahkan tombol yang bila diklik akan memicu navigasi ke rute tertentu.

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

Perlu disebutkan bahwa hook useNavigate dan hook useNavigation, yang diperkenalkan di React Router v6, memiliki tujuan yang berbeda meskipun namanya terkait erat.

Kait useNavigation memungkinkan Anda mengakses detail terkait navigasi, seperti status navigasi yang sedang berlangsung dan hal spesifik lainnya. Ini berguna ketika Anda ingin merender elemen UI seperti memuat spinner untuk memberikan masukan visual tentang proses yang sedang berlangsung.

Berikut ini contoh bagaimana Anda dapat memanfaatkan kait useNavigation.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

Dalam contoh ini, Tombol Kirim Komponen akan memperbarui teksnya secara dinamis berdasarkan status navigasi yang diperoleh dari kait useNavigation.

Meskipun hook ini memiliki peran yang berbeda-beda, namun kalian tetap bisa menggunakannya secara bersamaan. Kait useNavigate untuk memulai proses navigasi dan kait useNavigation untuk mengambil detail navigasi real-time, yang kemudian memandu jenis UI umpan balik untuk dirender di browser.

Menggunakan Kait useRoutes

Kait ini memungkinkan Anda menentukan jalur rute bersama dengan komponen terkaitnya dalam suatu objek. Selanjutnya, hook digunakan untuk mencocokkan rute dan menampilkan komponen yang relevan.

Berikut ini contoh sederhana cara menggunakan pengait:

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

Dalam contoh ini, rute objek mendefinisikan pemetaan jalur URL ke komponen. Itu Aplikasi komponen kemudian menggunakan kait ini untuk mencocokkan URL saat ini dan merender komponen yang sesuai berdasarkan rute yang cocok.

Menggunakan hook ini memberi Anda kontrol terperinci atas logika perutean dan memungkinkan Anda dengan mudah membuat logika penanganan rute khusus untuk aplikasi Anda.

Menangani Routing pada Aplikasi React

Meskipun React sendiri tidak menyertakan mekanisme bawaan untuk menangani tugas perutean, React Router mengisi celah ini. Ini menyediakan berbagai komponen perutean dan fungsi utilitas yang dapat Anda gunakan dengan mudah untuk membuat aplikasi interaktif dan ramah pengguna.