Diselesaikan: halaman reload router reaksi tidak ditemukan

Masalah utama terkait halaman reload React Router yang tidak ditemukan adalah ketika pengguna me-refresh halaman, browser akan mencoba membuat permintaan ke server untuk URL saat ini. Namun, karena React Router adalah perutean sisi klien, tidak ada rute server yang sesuai untuk URL dan dengan demikian kesalahan 404 Tidak Ditemukan dikembalikan. Ini bisa menjadi masalah terutama jika pengguna mengharapkan konten tertentu muncul saat penyegaran.

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

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </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 kode JSX.

// Baris 5: Baris ini membungkus seluruh kode JSX dalam komponen Router dari react-router-dom.

// Baris 6: Baris ini membungkus semua rute dalam komponen Switch dari react-router-dom.

// Baris 7 – 9: Baris ini mendefinisikan dua rute untuk '/' dan '/about' masing-masing dengan komponennya masing-masing (Beranda dan Tentang).

// Baris 11 – 12: Baris ini menentukan rute saat tidak ada rute lain yang cocok, yang menampilkan tag h1 bertuliskan “Halaman tidak ditemukan”.

Halaman tidak ditemukan kesalahan

Kesalahan halaman tidak ditemukan di React Router adalah kesalahan yang terjadi saat pengguna mencoba mengakses halaman atau rute yang tidak ada. Hal ini dapat terjadi jika pengguna salah mengetik URL, atau jika halaman yang ingin diakses telah dihapus atau dipindahkan. Di React Router, kesalahan ini ditangani dengan menggunakan prop render komponen dan meneruskan fungsi yang mengembalikan halaman 404. Ini memungkinkan pengembang untuk membuat halaman 404 khusus dengan konten apa pun yang mereka inginkan, seperti tautan bermanfaat atau pesan permintaan maaf.

Bagaimana cara menangani Page not found In react router

Saat menggunakan React Router, Anda dapat menangani halaman yang tidak ditemukan dengan membuat rute khusus yang akan merender komponen NotFound saat URL tidak cocok dengan salah satu rute yang ada. Untuk melakukan ini, Anda perlu membuat rute baru dengan jalur yang disetel ke "*" dan merender komponen NotFound Anda.

Sebagai contoh:

} />

Ini akan mencocokkan URL apa pun yang belum cocok dengan rute yang ada dan merender komponen NotFound Anda.

Bagaimana cara memaksa halaman yang bereaksi untuk memuat ulang

Di React Router, Anda dapat memaksa halaman untuk memuat ulang dengan menggunakan metode ganti pada objek histori. Ini akan mengganti entri saat ini di tumpukan riwayat dengan yang baru, sehingga memaksa memuat ulang halaman. Untuk menggunakan metode ini, Anda harus terlebih dahulu mendapatkan akses ke objek sejarah. Anda dapat melakukan ini dengan mengirimkannya sebagai penyangga saat membuat komponen router Anda:

const AppRouter = () => (

{/* Rute Anda di sini */}

);

Setelah Anda memiliki akses ke objek riwayat, Anda dapat menggunakan metode penggantiannya seperti:

history.replace('/some-route');