URL 変更後に React-Router-Dom Link コンポーネントが正しいコンポーネントをレンダリングしないのはなぜですか?

React-Router-Dom のリンク タグの問題

React-router-dom は、単一のページ間のナビゲーションのための 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 以降) にアップグレードし、それに応じてルート構文を調整します。

以上がURL 変更後に React-Router-Dom Link コンポーネントが正しいコンポーネントをレンダリングしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。