問題タブ [next-router]

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.

0 投票する
2 に答える
1752 参照

javascript - 戻るボタンが押されたときの Next.js の動作

ユーザーが戻るボタン (ブラウザー) を押したときにスクロール位置を維持するために、修正しようとしているページがあります。list というコンポーネントがあり、ユーザーにいくつかの製品を表示するとします。すべての製品を表示するには、ユーザーはリスト コンポーネントを下にスクロールできます。ユーザーが製品をクリックすると、アプリケーションはユーザーを詳細コンポーネントにリダイレクトします。次に、ユーザーがリストに戻ろうとしてブラウザの戻るボタンを押すと、リスト コンポーネントがレンダリングされ、自動的に一番上にスクロールするように見えます。

私の知る限り、ブラウザの戻るボタンを押すとwindow.history.back()アクションがトリガーされ、他には何も起こりません。

解決策として、scrollY 値を保存するアプリケーションのコンテキストに変数を実装し、レンダリングしようとしているコンポーネント (リスト コンポーネント) のcomponentWillMount(またはuseEffect) で、スクロール位置を値セットに設定しました。文脈で。

このスタックオーバーフローの投稿にコード全体を基づいているので、私のソリューションの詳細はこちらです: How to change scroll behavior while going back in next js?

いくつかのログを使用して値を確認したところ、スクロール位置はコンテキストに正しく保存されていますが、ウィンドウ イベント リスナーを使用しているため、リスト コンポーネントがレンダリングされた直後に値がゼロに設定されます。

私のコードでは、どのような種類のスクロール構成も使用していないため、その動作が Next.js または react のデフォルトのようなものであるかどうか疑問に思っていました。ユーザーがブラウザの戻るボタンを押したときに発生しますが、私は次の初心者であり、何かが欠けているのか、何が欠けているのかわかりません。この問題が React と関係があるのか​​ どうかさえわかりません。 Next.js 自体。

0 投票する
0 に答える
23 参照

reactjs - Router.back() は、シークレット モードで、またはリンクが別のソースからのものである場合には機能しません

eコマースWebサイトの反応フレームワークとしてNextjsを使用しています。私の製品詳細ページには、 Router.back()関数を持つカスタムの戻るボタンがあります。これは、Web サイトを前後にブラウジングするときに正常に機能します。しかし、製品の詳細リンクをコピーしてシークレットモードで直接開くと、カスタムの戻るボタンが機能しません...!!

誰でもこれに対する解決策を持っていますか?

0 投票する
1 に答える
313 参照

reactjs - NextJS、サーバー側でレンダリングされたアプリケーションを FTP アカウントにアップロードする方法

皆様のご協力に感謝いたします。create-react-app を使用して NPM RUN BUILD を実行し、「Build」フォルダーを FTP ディレクトリにアップロードできる方法が気に入っています。

これは NextJS でどのように可能ですか? アプリをビルドして NPM RUN BUILD を実行しましたが、Build フォルダーが表示されません。getServerSideProps でサーバー側レンダリングを使用していますが、これについて説明している Web ページはありますか? NextJS.org の Deployment Web ページを読みましたが、そのサーバーを使用したくありません。

またよろしくお願いいたします。

ブルース