Selesai: bertindak balas penghala dom IndexRedirect

Masalah utama yang berkaitan dengan React Router DOM IndexRedirect ialah ia boleh menyebabkan ubah hala yang tidak dijangka. Ini kerana komponen IndexRedirect secara automatik mengubah hala pengguna ke laluan tertentu apabila mereka mengakses URL akar tapak web. Ini boleh mengelirukan bagi pengguna yang menjangkakan untuk melihat halaman utama atau kandungan lain pada URL akar. Selain itu, jika pengguna telah menavigasi ke halaman tertentu dan kemudian menyegarkan penyemak imbas mereka, mereka mungkin akan diubah hala secara tidak dijangka daripada halaman tersebut disebabkan oleh komponen IndexRedirect.

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

<Router>
  <Route path="/">
    <IndexRedirect to="/home" />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Route>  
</Router>

1. “import { BrowserRouter as Router, Route, IndexRedirect } daripada 'react-router-dom';” – Baris ini mengimport komponen BrowserRouter, Route dan IndexRedirect daripada perpustakaan react-router-dom.

2. "” – Baris ini membungkus semua laluan dalam komponen Penghala yang digunakan untuk menyediakan penghalaan untuk aplikasi React.

3. "” – Baris ini menyediakan laluan dengan laluan '/'. Sebarang permintaan ke laluan ini akan dikendalikan oleh laluan ini.

4. "” – Baris ini mengubah hala sebarang permintaan ke laluan '/' ke '/home'.

5. "” – Baris ini menyediakan laluan dengan laluan '/home'. Sebarang permintaan ke laluan ini akan dikendalikan oleh komponen Laman Utama yang dihantar sebagai hujah kepada komponen Laluan.

6. "” – Baris ini menyediakan laluan dengan laluan '/about'. Sebarang permintaan ke laluan ini akan dikendalikan oleh komponen Perihal yang dihantar sebagai hujah kepada komponen Laluan.

7.”” & “” – Talian ini menutup kedua-dua laluan dan komponen penghala masing-masing

Apakah itu IndexRedirect

IndexRedirect ialah komponen dalam React Router yang membolehkan anda mengubah hala dari satu laluan ke laluan yang lain. Ia digunakan apabila anda ingin mengubah hala pengguna dari URL akar aplikasi anda ke laluan lain. Contohnya, jika anda mempunyai aplikasi dengan URL akar "/", anda boleh menggunakan IndexRedirect untuk mengubah hala pengguna ke "/home" apabila mereka melawat URL akar.

Bagaimana untuk melakukan IndexRedirect

IndexRedirect dalam React Router ialah cara untuk mengubah hala pengguna daripada URL akar aplikasi anda ke URL lain. Ini boleh berguna untuk mengarahkan pengguna ke halaman paling penting dalam aplikasi anda, atau untuk membuat halaman pendaratan.

Untuk melakukan IndexRedirect dalam React Router, anda perlu menggunakan komponen. Komponen ini mengambil dua prop: "ke" dan "tolak". Prop “to” digunakan untuk menentukan URL yang anda mahu pengguna diubah hala, manakala prop “tolak” menentukan sama ada sejarah penyemak imbas perlu dikemas kini atau tidak apabila ubah hala ini berlaku (benar secara lalai).

Contohnya, jika anda mahu pengguna yang melawat URL akar anda (cth, www.example.com) diubah hala ke www.example.com/home, anda boleh menggunakan IndexRedirect seperti ini:

… laluan lain …