Mengapa Komponen Pautan React-Router-Dom Saya Tidak Menunjukkan Komponen Yang Betul Selepas Perubahan URL?

Isu Tag Pautan dalam React-Router-Dom

React-router-dom menyediakan komponen Pautan untuk navigasi antara halaman dalam satu- aplikasi halaman. Walau bagaimanapun, dalam kes tertentu, pengguna menghadapi masalah apabila mengklik pada teg Pautan menukar URL tetapi gagal memaparkan komponen yang sepadan.

Penjelasan:

Isunya berpunca daripada isu keserasian antara versi react-router-dom@5 dan React@18. Khususnya, versi pra-5.3.3 react-router-dom tidak serasi sepenuhnya dengan React 18.

Penyelesaian:

Untuk menyelesaikan isu ini, salah satu daripada penyelesaian berikut boleh digunakan:

1. Kemas kini React-Router-Dom:

• Kemas kini kepada react-router-dom versi 5.3.3 atau lebih tinggi. Versi ini mengandungi pembetulan untuk isu keserasian ini.

npm uninstall -S react-router-dom
npm install -S react-router-dom@5.3.3

2. Kembali ke React 17:

• Turun taraf ke React 17 atau gunakan sintaks React 17 dalam fail index.js.

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById(&quot;root&quot;)
);

3. Nested React.StrictMode:

• Alihkan komponen React.StrictMode menjadi anak kepada komponen penghala.

<BrowserRouter>
  <React.StrictMode>
    ...
  </React.StrictMode>
</BrowserRouter>

4. Naik taraf kepada React-Router-Dom 6:

• Naik taraf kepada versi terkini react-router-dom (versi 6 atau lebih tinggi) dan laraskan sintaks laluan dengan sewajarnya.

Atas ialah kandungan terperinci Mengapa Komponen Pautan React-Router-Dom Saya Tidak Menunjukkan Komponen Yang Betul Selepas Perubahan URL?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!