Masalah utama yang terkait dengan redirect React Router 404 adalah sulit untuk diimplementasikan. Karena React Router tidak memiliki halaman 404 bawaan, pengembang harus secara manual membuat rute untuk halaman 404 dan kemudian mengonfigurasi router untuk mengalihkan permintaan apa pun yang tidak cocok dengan rute yang ada. Ini membutuhkan kode dan konfigurasi tambahan, yang dapat memakan waktu dan sulit untuk di-debug jika terjadi kesalahan. Selain itu, jika pengguna menavigasi langsung ke URL yang tidak ada, mereka masih akan melihat halaman kesalahan alih-alih dialihkan ke halaman 404.
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
{/* 404 Redirect */}
<Route render={() => (<Redirect to="/" />)} />
</Switch>
</Router>
);
// Baris 1: Baris ini mengimpor komponen BrowserRouter, Rute, dan Switch dari pustaka react-router-dom.
// Baris 3: Baris ini mendefinisikan fungsi yang disebut App yang mengembalikan JSX.
// Baris 5-7: Baris ini membungkus komponen App dalam komponen Router dari react-router-dom.
// Baris 8-10: Baris ini menentukan dua rute masing-masing untuk komponen Beranda dan Tentang.
// Baris 12: Baris ini mendefinisikan rute yang dialihkan ke halaman Beranda jika tidak ada rute lain yang cocok.
Apa itu Kode Kesalahan 404
Kode kesalahan 404 di React Router adalah kode status HTTP yang menunjukkan bahwa sumber daya yang diminta tidak dapat ditemukan. Biasanya dikembalikan saat pengguna mencoba mengakses halaman atau rute yang tidak ada. Hal ini dapat terjadi jika pengguna salah mengetik URL, atau jika halaman telah dihapus atau dipindahkan tanpa memperbarui tautan ke sana. Saat ini terjadi, React Router akan menampilkan halaman 404 generik dengan pesan yang sesuai yang menginformasikan pengguna tentang kesalahan mereka.
404 Pengalihan
Di React Router, pengalihan 404 adalah cara untuk mengalihkan pengguna ke halaman lain saat mereka mencoba mengakses URL yang tidak valid. Ini berguna untuk memberikan pengalaman yang lebih baik kepada pengguna saat mereka memasukkan URL yang salah atau mencoba mengakses halaman yang tidak ada. Redirect 404 dapat diimplementasikan menggunakan komponen Redirect dari React Router, yang memungkinkan Anda untuk menentukan nama path dari halaman yang ingin Anda arahkan ke pengguna. Misalnya, jika seseorang mencoba mengakses /invalid-url, Anda dapat menggunakan komponen Redirect seperti ini:
