反応して画面が真っ白になる原因は何ですか?

React で白い画面が表示される理由は、HtmlWebpackPlugin プラグインが Bundle.js を導入するときに、相対パスが導入されるためです。解決策は次のとおりです: 1. publicPath を出力構成に追加します。2. 履歴にモード、historyApiFallback を設定 true になる可能性があります。

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

react で画面が真っ白になる原因は何ですか?

反応履歴モードでの白い画面の問題

最近、再び反応を使用するとき、醜いハッシュを使用したくないので、ルーティングモードを履歴に変更した場合、白い画面が更新されたり、画像が読み込めないなどの問題が発生しましたので、その解決策について説明します。

原因

まずは、この一連の現象の原因についてお話します。

パス http://localhost:xxxx/ でページを更新すると問題はありません。すべてが正常に見えますが、サブモジュールに変更すると、更新画面が白くなります。なぜですか?

現在のパスからbundle.jsを検索することがわかります。なぜでしょうか? HtmlWebpackPlugin プラグインが Bundle.js の導入に役立つ場合、相対パス

が導入されるため、更新時に現在の URL を基準にして相対パスが検索されます。

解決策

理由が明確になったら、解決策は準備完了です。更新するときに、現在の URL をたどるのではなく、bundle.js の読み込みパスがルート ディレクトリから開始されるようにする方法を見つける必要があるだけです。

1.出力設定は publicPath に追加されます

output: {
    filename: 'assets/js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/"
}

publicPath とは何ですか?公式サイトにはこんな一文があります

webpack-dev-serverはデフォルトでpublicPathをベースとして使用し、webpackが出力したファイルにサービスがアクセスできるようにするディレクトリを決定するために使用します。

簡単に理解すると、静的リソースはこのパスから読み込まれます

publicPath: "/" //読み込みパス '/assets/js/bundle.js'

Inこうすることで、更新するたびにルート ディレクトリから読み込みが開始されるため、bundle.js が失われることはありません。画像を読み込めない場合も同様の問題が発生します。

2.historyApiFallback of webpack-dev-server

履歴モードでは、devServer はhistoryApiFallback を true に設定する必要があります

devServer: {
historyApiFallback: true
}

上記 2 点と履歴モードに注意してください普通に使えます。他にも理由がある場合は、お気軽に追加してください。

ps: プロジェクトがサーバーにデプロイされた後、ページ画面が空白になります。関連する設定をバックグラウンドで行う必要がありますが、ここでは説明しません。

推奨される学習: 「react ビデオ チュートリアル 」

以上が反応して画面が真っ白になる原因は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。