為什麼我的 React-Router-Dom 連結元件在 URL 更改後沒有渲染正確的元件？

React-Router-Dom 中的連結標籤問題

React-router-dom 提供了一個Link 元件，用於在單一頁面之間導航頁面應用程式。但在某些情況下，使用者會遇到點擊 Link 標籤改變 URL 但無法渲染對應元件的問題。

說明：

問題源自於react-router-dom@5和React@18版本之間的相容性問題。具體來說，react-router-dom 5.3.3 之前的版本與 React 18 不完全相容。

解決方案：

要解決此問題，可以使用以下方法之一：可以應用以下解決方案：

1.更新React-Router-Dom：

• 更新到react-router-dom版本5.3.3或更高版本。此版本修復了此相容性問題。

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

2.還原到 React 17：

• 降級到 React 17 或在 index.js 檔案中使用 React 17 語法。

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

import App from "./App";

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

3.巢狀 React.StrictMode：

• 將 React.StrictMode 元件移至路由器元件的子元件。

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

4.升級到React-Router-Dom 6：

• 升級到最新版本的react-router-dom（版本6或更高版本）並相應調整路由語法。

以上是為什麼我的 React-Router-Dom 連結元件在 URL 更改後沒有渲染正確的元件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！