Bagaimana untuk menyelesaikan halaman ralat tindak balas kosong

Penyelesaian kepada halaman ralat tindak balas kosong: 1. Alihkan laluan akar ke bahagian bawah label Tukar 2. Periksa sama ada komponen atas mengandungi kata kunci yang tepat, dan alih keluarnya jika ia mengandungi kata kunci; . Tekan Dokumentasi komponen boleh diubah hala dalam subkomponen peringkat atas.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menyelesaikan halaman ralat kosong sebagai tindak balas?

Masalah kosong halaman tindak balas

Prakata

Kadangkala, apabila kita menggunakan modul penghala tindak balas untuk menukar laluan Kadangkala halaman akan kosong Kali ini kami akan menerangkan keadaan dengan jelas dan menyelesaikannya.

Masalah yang berlaku

Di bawah, kami terus memuat naik kod yang bermasalah:

<Switch>
    <Route path={"/"} component={loadable(() => import("./App.jsx"))} />
    <Route path={"/home"} component={loadable(() => import("./views/Home/Home.jsx"))} />
    <Route path={"/login"} component={loadable(() => import("./views/Login/Login.jsx"))} />
</Switch>

Kod ini adalah salah satu kod yang sering kami gunakan masalah Masalah dengan halaman kosong kod ini adalah sangat mudah, iaitu, tambah medan tepat terus ke teg Laluan, dan gunakan peraturan pemadanan paksa untuk memadankan laluan dengan komponen halaman Walau bagaimanapun, apabila menggunakan tepat, halaman kedua tidak akan sepadan.

Oleh kerana peraturan padanan penghala tindak balas dipadankan dari atas ke bawah dalam teg Suis, apabila laluan perlu melompat ke laluan rumah, ia pertama kali sepadan dengan laluan akar laluan semasa boleh memadankan mana-mana Laluan kedua di bawah laluan ini, tetapi kerana laluan akar tidak mempunyai halaman terikat, ia akan kosong.

Penyelesaian

Masalah ini boleh diselesaikan dengan mudah,

<Switch>
    <Route path={"/home"} component={loadable(() => import("./views/Home/Home"))} />
    <Route path={"/login"} component={loadable(() => import("./views/Login/Login"))} />
  <Route exact path={"/"} component={loadable(() => import("./App.jsx"))} />
</Switch>

Lihat kod di atas untuk mengalihkan penghalaan akar ke Tukar Bahagian bawah di dalam label boleh diselesaikan.

Disebabkan peraturan padanan teg Suis, laluan akar akan dipadankan hanya apabila laluan sekunder lain tidak dapat dipadankan dan medan padanan mandatori yang tepat ditambahkan pada laluan akar untuk menjadikan laluan akar A sepadan boleh paksa. Laluan ini juga mempunyai laluan sekunder, dan medan tepat boleh dialih keluar.

Gunakan react-router-config

Apabila menggunakan pakej modul pengurusan penghalaan tindak balas seperti react-router-config, fenomena skrin putih adalah sangat mudah. Ini kerana Ia disebabkan oleh tidak biasa dengan penghalaan tindak balas dan tidak biasa dengan pakej modul pihak ketiga.

const routes = [
  {
    path: "/",
    component: Home,
    routes: [
      {
        path: "/",
        render: () => <Redirect to="/user" />
      },
      {
        path: "/user",
        component: User,
        exact: true
      },
      {
        path: "/content",
        component: Content,
        exact: true
      }
    ]
  },
  {
    path: "/login",
    component: Login,
    exact: true
  }
]

Pada masa ini, terdapat banyak faktor yang akan menyebabkan halaman kosong Kami hanya akan bercakap tentang tiga yang paling ciri.

• Kosong apabila mengubah hala

Pengalihan semula react-router-config sedikit berbeza daripada pengalihan penghalaan tersuai

• halaman dalam subkomponen peringkat atasnya kosong apabila memaparkan

Halaman kosong pada masa ini sebenarnya sama seperti yang dinyatakan di atas Sebabnya secara kasarnya yang sama. Anda hanya perlu menyemak sama ada komponen atas komponen mengandungi kata kunci yang tepat. Jika ia mengandungi kata kunci, alih keluarnya. sama ada ia berada dalam sub-laluan). Tambahkan kata kunci yang tepat, sama ada penghalaan bersarang dengan betul, sama ada semua laluan ditulis dengan betul, sama ada komponen dieksport dengan betul, dsb.).

• Kaedah ketiga dan paling mudah ialah menggunakan kaedah yang salah dan tidak mengubah hala dalam subkomponen peringkat atas mengikut dokumen komponen.

Pada ketika ini

Untuk masalah ini, anda harus terlebih dahulu menganalisis kunci masalah, kemudian cari tempat khusus di mana masalah itu berlaku, dan akhirnya menyelesaikannya.

Inilah cara yang betul untuk menyelesaikan masalah

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan halaman ralat tindak balas kosong. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!