Selesai: halaman muat semula penghala bertindak balas tidak ditemui

Kemaskini terakhir: 09/11/2023
Pengarang Jejak Sumber JavaScript

Masalah utama yang berkaitan dengan halaman muat semula Penghala React tidak ditemui ialah apabila pengguna memuat semula halaman, penyemak imbas akan cuba membuat permintaan kepada pelayan untuk URL semasa. Walau bagaimanapun, oleh kerana Penghala React ialah penghalaan sisi klien, tiada laluan pelayan yang sepadan untuk URL dan oleh itu ralat 404 Tidak Ditemui dikembalikan. Ini boleh menjadi masalah terutamanya jika pengguna menjangkakan kandungan tertentu muncul semasa muat semula.

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 mengimport komponen BrowserRouter, Route dan Switch daripada pustaka react-router-dom.

// Baris 3: Baris ini mentakrifkan fungsi yang dipanggil App yang mengembalikan kod JSX.

// Baris 5: Baris ini membungkus keseluruhan kod JSX dalam komponen Router daripada react-router-dom.

// Baris 6: Baris ini membungkus semua laluan dalam komponen Suis daripada react-router-dom.

// Baris 7 – 9: Baris ini mentakrifkan dua laluan untuk '/' dan '/about' masing-masing dengan komponen masing-masing (Home dan About).

// Baris 11 – 12: Baris ini mentakrifkan laluan apabila tiada laluan lain sepadan, yang menjadikan teg h1 berkata "Halaman tidak ditemui".

Ralat tidak ditemui halaman

Ralat halaman tidak ditemui dalam Penghala React ialah ralat yang berlaku apabila pengguna cuba mengakses halaman atau laluan yang tidak wujud. Ini boleh berlaku jika pengguna tersalah taip URL atau jika halaman yang mereka cuba akses telah dialih keluar atau dialihkan. Dalam React Router, ralat ini dikendalikan dengan menggunakan prop dan hantaran komponen dalam fungsi yang mengembalikan halaman 404. Ini membolehkan pembangun membuat halaman 404 tersuai dengan apa-apa kandungan yang mereka mahu, seperti pautan berguna atau mesej permohonan maaf.

Bagaimanakah saya mengendalikan Halaman tidak ditemui Dalam penghala reaksi

Apabila menggunakan Penghala React, anda boleh mengendalikan halaman yang tidak ditemui dengan membuat laluan tersuai yang akan menyebabkan komponen NotFound apabila URL tidak sepadan dengan mana-mana laluan sedia ada. Untuk melakukan ini, anda perlu mencipta laluan baharu dengan laluan ditetapkan kepada “*” dan menjadikan komponen NotFound anda.

Sebagai contoh:

} />

Ini akan memadankan mana-mana URL yang belum dipadankan dengan laluan sedia ada dan menjadikan komponen NotFound anda.

Bagaimanakah cara saya memaksa halaman bertindak balas untuk memuat semula

Dalam Penghala Reaksi, anda boleh memaksa halaman untuk memuat semula dengan menggunakan kaedah ganti pada objek sejarah. Ini akan menggantikan entri semasa dalam timbunan sejarah dengan yang baharu, sekali gus memaksa muat semula halaman. Untuk menggunakan kaedah ini, anda perlu mendapatkan akses kepada objek sejarah dahulu. Anda boleh melakukan ini dengan menghantarnya sebagai prop semasa membuat komponen penghala anda:

const AppRouter = () => (

{/* Laluan anda di sini */}

);

Sebaik sahaja anda mempunyai akses kepada objek sejarah, anda boleh menggunakan kaedah gantinya seperti:

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

Related posts: