問題タブ [react-snap]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - React ネイティブ Web アプリでのサーバー側レンダリング
反応ネイティブ Web を使用して Web アプリを作成しました。サーバー側のレンダリングをアプリに追加したいと考えています。サーバー側でページをレンダリングするコードを追加しましたが、機能しません。ネットワーク プレビュー タブに空白の白いページが表示され、サーバーは index.html ファイルのみを応答として送信します。
サーバー側のレンダリング用に react-native-web サーバー API も試しましたが、次のような空の div タグが返されます。
react-native Webserver API と同じコードを使用しました ( https://necolas.github.io/react-native-web/docs/rendering/#server-api )
アプリのプリレンダリングの使用を提案している記事をいくつか見つけました。アプリに事前レンダリングを追加するために、react-snap ( https://www.npmjs.com/package/react-snap ) を試しました。スナップショットは作成されますが、アプリを起動すると、最初のページ (ランディング ページ) しか読み込まれません。アプリ、このページで動作しているイベント (クリック イベント) はなく、スタイルもありません。アプリ内を移動する方法はありません。
次に、react-snapshot ( https://www.npmjs.com/package/react-snapshot ) を試しましたが、毎回ビルド エラーが発生し、アプリのスナップショットが生成されません。
期待: アプリはサーバー側でレンダリングされる必要があり、ネットワーク プレビューでページのスナップショットが表示され、サーバーは応答でページのスナップショットを返す必要があります。
誰でもこの問題を解決するための解決策を提案できますか? サーバー側でネイティブ Web アプリに反応させるにはどうすればよいですか?
puppeteer - react-snap skipThirdPartyRequests が true に設定されていますが、引き続き Google Maps API を呼び出します
package.json で次の構成を設定しました。
それでも、yarn buildこのメッセージがスローされると。
なぜ、react-snap が Google Maps API をまったく呼び出すのか疑問に思っていskipThirdPartyRequests: trueます。
完全なログはここにあります：
javascript - おそらくナビゲーションが原因で、実行コンテキストが破棄されました
このエラーは、React アプリのプロダクション ビルドを作成すると表示されます。これは、ブラウザの言語を検出し、ユーザーをその言語のバージョンのサイトにリダイレクトするスクリプトがあるために発生します。
これは問題のコードです（App.jsにあります）：
私が正しく理解していれば、問題は、ページをクロールするときに、このコードに問題があることです。
なぜ私がそれのwindow.location.pathname代わりに使用しているのか疑問に思っているならhistory.replace()、今のところ説明する価値のない他の理由があるからです.