質問この問題には多くの理由があるようです。私の問題は、パラメータ付きの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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu 18.04 は pyenv、pyenv-virtualenv、virtualenv、Numpy、SciPy、Pillow、Matplotlib をインストールします
>>: MySQLの始め方から諦め方まで徹底解説 - インストール
ログイン dockerログインdocker login コマンドを実行し、ユーザー名、パスワード、メ...
MySQL 5.7.9 バージョンの sql_mode=only_full_group_by の問題...
MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...
目次序文 - Vue ルーティング1. 最も基本的なルーティング構成1. router/index....
目次1. はじめに: 2. プロトタイプチェーン継承: 3. コンストラクタ継承の借用(オブジェクト...
目次準備する5つの武器…のためにオブジェクト.キーオブジェクト.getOwnPropertyName...
初め:コードをコピーコードは次のとおりです。 <input type="text&q...
主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...
目次序文パブリッシュ・サブスクライバ・パターン結果電話要約する序文双方向データ バインディングとは、...
なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...
目次序文コンストラクタ、プロトタイプオブジェクト、インスタンスオブジェクトの関係プロトタイプチェーン...
目次1. はじめに2. プロトタイプチェーン継承3. コンストラクタの継承4. 組み合わせ継承1. ...
Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用していま...
Docker の作成Docker Compose は、複数の Docker コンテナを定義して実行す...
まさか、2021年になってもTypeScriptについて聞いたことがない人がいるなんて?プロジェクト...