Selesai: penghala bertindak balas tambah sandaran untuk menangkap semua

Masalah utama yang berkaitan dengan React Router dan menambah sandaran untuk menangkap semua adalah sukar untuk mengkonfigurasi laluan sandaran dengan betul. Laluan sandaran perlu dikonfigurasikan sedemikian rupa sehingga ia akan menangkap semua permintaan, termasuk yang bukan laluan yang sah. Jika konfigurasi tidak dilakukan dengan betul, maka permintaan untuk laluan tidak sah tidak akan ditangkap oleh laluan sandaran dan boleh mengakibatkan ralat atau tingkah laku yang tidak dijangka. Selain itu, jika aplikasi mengandungi laluan dinamik (cth, berdasarkan input pengguna), maka ini perlu diambil kira semasa mengkonfigurasi laluan sandaran supaya mereka juga ditangkap olehnya.

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

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

      {/* Fallback route */}
      <Route component={NoMatch} /> 

    </Switch>
  </Router>  
);

// Baris 1: Baris ini mengimport komponen BrowserRouter, Route dan Switch daripada pustaka react-router-dom.
// Baris 2: Baris ini mentakrifkan pemalar yang dipanggil App yang merupakan komponen fungsi.
// Baris 3: Baris ini menjadikan komponen Router daripada react-router-dom.
// Baris 4: Baris ini menjadikan komponen Switch daripada react-router-dom.
// Baris 5 & 6: Baris ini menjadikan dua komponen Laluan dengan laluan dan komponen yang tepat untuk dipaparkan apabila laluan tersebut dipadankan.
// Baris 8: Baris ini menjadikan laluan sandaran jika tiada laluan lain dipadankan. Ia akan menjadikan komponen NoMatch jika tiada laluan lain sepadan.

Apakah penghala tindak balas

React Router ialah perpustakaan penghalaan untuk aplikasi React. Ia membolehkan pembangun mencipta laluan dan komponen yang boleh digunakan untuk menavigasi antara halaman berbeza dalam aplikasi React. Ia juga menyediakan ciri seperti padanan laluan dinamik, parameter pertanyaan dan keadaan lokasi. Selain itu, ia menyediakan sokongan untuk pemaparan sebelah pelayan dan pemisahan kod.

Tangkap-semua laluan sandaran

Laluan sandaran tangkap semua ialah laluan dalam Penghala React yang sepadan dengan mana-mana laluan yang belum dipadankan oleh mana-mana laluan lain. Jenis laluan ini sering digunakan untuk membuat halaman 404 atau untuk memaparkan komponen untuk semua laluan yang tidak sepadan. Adalah penting untuk ambil perhatian bahawa laluan tangkap semua sandaran hendaklah sentiasa menjadi laluan terakhir dalam senarai laluan, kerana ia akan memadankan mana-mana laluan dan menghalang laluan lain daripada dipadankan.

Bagaimana untuk menentukan laluan sandaran dengan betul

Apabila menggunakan Penghala React, laluan sandaran ialah laluan yang digunakan apabila tiada laluan lain sepadan dengan URL yang diminta. Ia biasanya digunakan untuk mengubah hala pengguna ke halaman 404 atau beberapa halaman lain apabila URL yang diminta tidak wujud.

Untuk menentukan laluan sandaran dengan betul dalam Penghala Reaksi, anda harus membuat a komponen dan bungkusnya di sekitar laluan anda. Di dalam komponen, anda harus memasukkan laluan biasa anda diikuti dengan a komponen tanpa laluan yang ditentukan. Ini akan menjadi laluan sandaran anda dan akan menangkap sebarang permintaan yang tidak sepadan dengan mana-mana laluan anda yang lain. Anda kemudiannya boleh menentukan perkara yang perlu berlaku apabila laluan ini dipadankan, seperti mengubah hala ke halaman 404 atau memaparkan beberapa kandungan lain.

Mengapa laluan sandaran sentiasa dicetuskan

Laluan sandaran dalam Penghala React sentiasa dicetuskan apabila laluan URL tidak sepadan dengan mana-mana laluan sedia ada. Ini boleh berlaku apabila pengguna menaip secara manual URL yang salah, atau jika logik penghalaan aplikasi tidak dikonfigurasikan dengan betul. Laluan sandaran membolehkan pembangun mengendalikan senario ini dengan anggun dan memberikan maklum balas kepada pengguna, seperti halaman 404 atau mengubah hala mereka ke halaman utama.