React Router が表示されない場合はどうすればよいですか?

反応ルーターが表示されない場合の解決策: 1. 親ルーティング コンポーネントにbrowserRouter を追加してルーターをラップします; 2. 「this.props.history.go()」を使用してコンポーネントを更新します; 3. 追加でブラウザルータパラメータに「forcerefresh={true}」を指定; 4. 「」にフック関数を記述し、このルートから出るときまたはこのルートに入るときに呼び出します。

#このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

React Router が表示されない場合はどうすればよいですか?

react-router-dom ルーティング ジャンプ コンポーネントで問題が表示されない

シナリオ

孫ルートを使用してジャンプする場合親ルートへのジャンプに Link to または this.props.history.push のどちらを使用するかに関係なく、URL アドレス バーは変化しますが、ページ コンポーネントをロードできず、ページは更新されません。親ルートで [リンク先] をクリックすると、同じジャンプ位置になり、URL は変更されず、ページは更新されませんが、コンポーネントは読み込まれます。

ジャンプ ポイントとターゲット ルートで this.props を確認すると、this.props.history がジャンプ後にジャンプ後のルートになっていますが、this.props.location は元のルートと一致していることがわかります。コンポーネントを正常にロードするページの場合、履歴と場所は両方とも同じルートです。

解決策

ブロガーの Baidu は、本当の理由を見つけるまで、長い間さまざまな方法を試しましたが、もちろん、他にも多くの興味深い方法を入手しました。

本当の理由

は、react-router-dom での BrowserRouter の悪用によるものです。ブロガーはビデオを見てルーティングを学んだため、ルーティングについてはあまり明確ではありません。そこで、親ルーティングコンポーネントにbrowserRouterを追加してルーターをラップし、子ルートも孫ルートにリンクされていたので、browserrouterを使用して子ルートをラップして孫ルートにリンクしました。ちなみに、孫ルートは問題なく兄弟ジャンプできますが、孫ルートが子ルートにジャンプする場合は問題ありませんが、孫ルートが親ルートにジャンプするとコンポーネントをロードできません。親ルートから子ルート、孫ルートへジャンプしても問題ありません。これがこのピットの特徴です。

したがって、ルーティング情報は主にブラウザルータに含まれていると推測しますが、サブルートにブラウザルータが含まれると、上位層のブラウザルータの情報が失われます。

Baidu によって取得されたその他のメソッド

this.props.history.go() を使用してコンポーネントを更新できます。go 括弧内の数字は以前のメソッドを表します1 つのページと次のページ、この機能は更新であり、更新する必要がある場合に使用できます。

空白のページにジャンプしてから戻るという方法を使用しますが、ブロガーはそれを試しましたが、効果はなかったようです。

forcerefresh={true} は、browserrouter パラメータに追加できます。ブロガーがそれを試したところ、以下のパッケージ内の各ルート ジャンプが更新されました。特定の場所で役立つ可能性があります。

このルートに出入りするときに呼び出されるフック関数を記述することもできます。たとえば、権限のあるルートを入力する場合、myfunc に onEnter={myfunc} の権限検証を追加し、検証に通らない場合は this.props.history を置き換えてジャンプすることで目的を達成できます。

推奨される学習: 「

react ビデオ チュートリアル 」

以上がReact Router が表示されない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。