反応ジャンプ後にルートが変更されてもページが更新されない場合の解決策

反応ジャンプ後にルートが変更されてもページが更新されない場合の解決策

質問

この問題には多くの理由があるようです。私の問題は、パラメータ付きのURLを更新できないことです。ルーター5.0バージョンでは、withRouter関連コンポーネントを使用してページにジャンプするには、次のようになります。

ここに画像の説明を挿入

ルーティングコード

ここに画像の説明を挿入

解決

ルーティング コンポーネントの最上位要素にキーを追加すると、通常のジャンプはパスに基づいて識別されるため、ルートの認識が向上しますが、パスにパラメーターが含まれている場合は、ルートを正確に識別できません。ただし、ページにジャンプすると、各アドレスのロケール オブジェクトにキーが追加されます。次のように印刷します

 // コンポーネントのマウント componentDidMount() {
    コンソールにログ出力します。
  }

ここに画像の説明を挿入

このキーをルートの最上位要素にバインドすることで、ルートを正確に特定できます。

 与える() {
    戻る (
      *これが鍵です*/
      <div キー = {this.props.location.key}>
          <スイッチ>
            <ルートの正確なパス="/" コンポーネント={Home} />
            <ルートの正確なパス="/products/:id" コンポーネント={Products} />
            <ルートの正確なパス="/about" コンポーネント={About} />
            <ルートの正確なパス="/solution" コンポーネント={ソリューション} />
            <ルート
              ちょうど
              パス="/ソリューションの詳細/:id"
              コンポーネント={ソリューションの詳細}
            />
            <ルートの正確なパス="/download" コンポーネント={ダウンロード} />
            <Route path="/about" component={ダウンロード} />
            <ルートの正確なパス="/details/:id" コンポーネント={詳細} />
            <ルート パス="/contact" コンポーネント={連絡先} />
            <ルートコンポーネント={ErrorPage} />
          </スイッチ>
      </div>
    );
  }

ただし、this.props が空のオブジェクト {} になっている場合があります。これは、コンポーネントを関連付けるために withRouter を使用しなかったことが原因である可能性があります。関連付けるだけです。 app.js は関連付けることができず、withrouter はルーティング コンポーネントまたは app.js のサブコンポーネントにのみ関連付けることができることに注意してください。

React をインポートします。{ コンポーネント } から "react" をインポートします。
「react-router」から { withRouter } をインポートします。

クラス routers は Component を拡張します {
 /**
  * ライフサイクル機能 */
 // コンポーネントのマウント componentDidMount() {
   コンソールにログ出力します。
 }
 与える() {
   戻る (
     <div キー = {this.props.location.key}>
     </div>
   );
 }
}
デフォルトの withRouter(routers) をエクスポートします。

リアクトジャンプ後にルートが変更されてもページが更新されない問題の解決策に関するこの記事はこれで終わりです。リアクトジャンプ後にページが更新されない問題に関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React-RouterでUrlパラメータが変更されてもページが更新されない問題の解決方法を詳しく解説
  • react-router browserHistory 更新ページの 404 問題の解決方法

<<:  Ubuntu 18.04 は pyenv、pyenv-virtualenv、virtualenv、Numpy、SciPy、Pillow、Matplotlib をインストールします

>>:  MySQLの始め方から諦め方まで徹底解説 - インストール

推薦する

1 行のコードでさまざまな IE 互換性の問題を解決します (IE6-IE10)

x-ua-compatible は、IE ブラウザがページを解析およびコンパイルするためのモデルを...

Windows での MySQL データベースのマスター/スレーブ構成チュートリアル

WindowsでMySQLデータベースのマスターとスレーブを構成する詳細なプロセスは次のとおりです。...

JS での矢印関数と this の記述と理解

目次序文1. JSで関数を書く方法1. 通常の関数の書き方2. 矢印関数の書き方2. 通常の関数でこ...

doctype のマークアップ検証

しかし最近、この方法を使用すると問題が発生することがわかりました。コードを参照してください。コードを...

Reactでカスタムフックを作成する方法を教えます

1. カスタムフックとは何かロジックの再利用簡単に言えば、カスタム フックを使用すると、特定のコンポ...

JavaScriptでマクロを使用する方法

言語では、DSL を実装するためにマクロがよく使用されます。マクロを使用すると、開発者は JSX 構...

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

WeChatアプレットが複数行テキストのスクロール効果を実現

この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...

Javascript実践におけるコマンドモードの詳しい説明

目次意味構造例カスタムショートカットキー元に戻すとやり直し録音と再生マクロ要約する意味リクエストをオ...

axios を使用してプロジェクト内の複数の繰り返しリクエストをフィルタリングする方法

目次1. はじめに:この場合、通常は 2 つのアプローチがあります。 2. CancelToken ...

Vue のディスパッチとブロードキャストの自己実装の詳細説明 (ディスパッチとブロードキャスト)

解決すべき問題主にコンポーネント間のクロスレベル通信用なぜディスパッチとブロードキャストを自分で実装...

Vue のすべてのカプセル化方法の簡単な概要

目次1. カプセル化API 2. グローバルツールコンポーネントを登録する3. グローバル関数をカプ...

テキストの両側に水平線を描くための CSS のサンプルコード

この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...

vue3 における vuex と pinia の落とし穴

目次導入インストールと使用方法文章の相違点と類似点の簡単な比較VuexとPiniaの長所と短所Pin...

CSS と JavaScript を使用して管理ダッシュボードのレイアウトを構築するためのサンプル コード

あなたが作成するものこの新しいチュートリアルでは、CSS と JavaScript を使用して、レス...