Next.js: राउटर.पुश ('/ लिंक') ट्रिगर होने पर पृष्ठ के शीर्ष पर स्क्रॉल न करें

इसे ऊपर स्क्रॉल करना चाहिए या नहीं यह उपयोगकर्ता द्वारा तय किया जाता है। मुझे लगता है कि आप इसे componentDidMount . में कर सकते हैं

मैं सहमत हूं कि एक scrollreset विकल्प होना चाहिए। यदि आप इसे componentDidMount में नहीं करना चाहते हैं तो आप Router.push('/link').then(() => window.scrollTo(0, 0)); भी कर सकते हैं।

Router.push('/link').then(() => window.scrollTo(0, 0)); इसे करने का यह सही तरीका है, इसे बेझिझक रीडमी @gragland में जोड़ें ❤️

धन्यवाद @gralagland आपका समाधान इतना बदसूरत नहीं लगता है, लेकिन DRY प्रिंसिपल रखने के लिए ऐसा विकल्प होना अच्छा होगा। अभी के लिए एकमात्र तेज़ समाधान यह है कि इसे लिखने के लिए लाइव टेम्प्लेट बनाया जाए

वाह... आपका मतलब है कि मुझे .then() जोड़ने के लिए प्रत्येक पृष्ठ की समीक्षा करने की आवश्यकता है! वैसे, मैं नेक्स्ट-रूट्स का उपयोग कर रहा हूं, तो क्या इसे विश्व स्तर पर जोड़ने का कोई तरीका है, बस इस कोड को एक बार जोड़ने के लिए, जैसे addRequestTransform अगर आपको एपीआई को कॉल करने से पहले कुछ हेडर जोड़ने की आवश्यकता है।

@MBach आप ट्रैगेट घटक के componentDidMount window.scrollTo(0, 0) भी लगा सकते हैं।

मैं सिर्फ झंकार करना चाहता हूं और कहता हूं कि मुझे यह व्यवहार बेहद आश्चर्यजनक लगा। लगभग एक साल से नेक्स्ट.js के साथ प्रोडक्शन साइट्स का निर्माण कर रहे हैं और अभी-अभी पता चला है कि Router.push शीर्ष पर वापस नहीं आ रहा था – मैंने हमेशा सोचा था कि Router.push बिल्कुल <Link> जैसा व्यवहार करता था

और <a> बनाम <Link> के गैर-एसपीए समकक्ष Router.push window.location सेट कर रहे हैं जो आपको भी लौटाता है पृष्ठ के शीर्ष पर, नहीं? यह मेरे लिए डिफ़ॉल्ट व्यवहार के रूप में अधिक समझ में आता है।

@gragland यह काम नहीं करता

इसे विश्व स्तर पर काम करने के लिए आप बिल्ट-इन next.js राउटर इवेंट श्रोता का उपयोग कर सकते हैं: Router.events.on('routeChangeComplete', () => { window.scrollTo(0, 0); }); ।
बस इसे सभी पृष्ठों पर साझा किए गए घटक में रखें, जैसे शीर्षलेख।

@timneutkens क्या कोई कारण है कि अनिवार्य Router.push और <Link> के लिए डिफ़ॉल्ट स्क्रॉल व्यवहार अलग हैं? मेरे लिए एक स्पष्ट बग की तरह लगता है कि वे अलग तरह से व्यवहार करते हैं।

राउटर.बैक () वादा वापस नहीं करता है, लेकिन एक ही समस्या है, क्या करना है, मैन्युअल रूप से स्क्रॉल करना?

@alexsenichev क्या आपने @macmenak समाधान की कोशिश की?

<Link href="/product/[id]" as={ /उत्पाद/${item.id} } beforePopState={()=>{ window.screenTop = 0; }}> <a> <h6>{item.name}</h6> </a> </Link>

नमस्ते। हमारे पास Link घटक डिफ़ॉल्ट स्क्रॉल शीर्ष true पर क्यों होगा लेकिन Router.push नहीं?

मुझे लगता है कि इस मुद्दे पर फिर से विचार किया जाना चाहिए।

क्षमा करें, लेकिन योगदानकर्ताओं को टैग करना: @liweinan0423 @timneutkens @exogen @goldenshun

यह अच्छा होगा यदि स्क्रॉल को शीर्ष पर लाने के लिए router.push() पर कोई विकल्प था, लेकिन मुझे नहीं लगता कि यह डिफ़ॉल्ट होना चाहिए क्योंकि यह हर किसी के लिए एक ब्रेकिंग बदलाव होगा जो पहले से ही मानता है कि यह ऐसा नहीं करता है।

@ markjackson02 मैं नहीं देखता कि यह एक ब्रेकिंग बदलाव कैसे होगा क्योंकि यह डिफ़ॉल्ट तरीका है ब्राउज़र इसे संभाल लेगा। मैं इस तथ्य से सहमत नहीं हूं कि हमारे पास समान कार्यक्षमता के लिए दो अलग-अलग दृष्टिकोण हैं।

यह निश्चित रूप से एक क्रांतिकारी बदलाव होगा। लोग अब जिस तरह से ऐप बना रहे हैं, उसी तरह से ऐप बना रहे हैं और उम्मीद करते हैं कि यह उसी तरह से काम करेगा।

मैं उन दोनों के खिलाफ नहीं हूं जिनकी डिफ़ॉल्ट कार्यक्षमता समान है लेकिन मुझे नहीं लगता कि यह माइग्रेशन प्रयास के लायक है।

वैसे भी, यह मुद्दा बंद है इसलिए हमें जो कुछ भी करना है उसके साथ हमें एक नया मुद्दा खोलना चाहिए।

@markjackson02 OMHO, ब्रेकिंग चेंज यह है कि यह अभी तक उस तरह से काम नहीं कर रहा है! गलत व्यवहार पहले से ही बना हुआ है। इसलिए मुझे लगता है कि इसे जिस तरह से रखना चाहिए, उसे रखना एक अच्छा विचार होगा। लेकिन मैं आपसे सहमत हूं, योगदानकर्ता शायद यहां ध्यान नहीं देंगे।

@Timer @timneutkens इसके अलावा, Link और Router.push के व्यवहार में अंतर से काट लिया गया। FWIW, +1 को Router.push के Router.push options में जोड़ने के लिए क्योंकि यह इसे पिछड़ा संगत रखेगा।

आप इसका उपयोग पृष्ठ के शीर्ष पर रूट करने और स्क्रॉल करने के लिए कर सकते हैं:

// route using nextjs router and scroll to the top of the page
const routeToTop = (router, ...args) => {
    if(typeof window !== 'undefined') window.scrollTo(0, 0)
    return router.push.apply(router, args)
}

// usage

const router = useRouter()

routeToTop(router, '/my/page')

routeToTop(router, '/articles/[slug]', `/articles/${article.slug}`)

routeToTop(router, {
    pathname: '/search',
    query: {q: searchQuery},
})

बीटीडब्ल्यू, यह Link व्यवहार के रूप में उपयोगकर्ता अनुभव के लिए उतना अच्छा नहीं है, क्योंकि आप अगले पृष्ठ के लोड होने के बजाय तुरंत पृष्ठ के शीर्ष पर स्क्रॉल करते हैं।

मैंने रुचि रखने वालों के लिए यहां एक संबंधित मुद्दा जोड़ा: https://github.com/vercel/next.js/issues/15206

एफडब्ल्यूआईडब्ल्यू, यहां एक वर्कअराउंड पर मेरा विचार है जिसे संबंधित मुद्दे में साझा किया गया था।

import { useRouter } from 'next/router';
import { useEffect } from 'react';

/**
 * React hook that forces a scroll reset to a particular set of coordinates in the document
 * after `next/router` finishes transitioning to a new page client side. It smoothly scrolls back to
 * the top by default.
 *
 * <strong i="6">@see</strong> https://github.com/vercel/next.js/issues/3249
 * <strong i="7">@see</strong> https://github.com/vercel/next.js/issues/15206
 * <strong i="8">@see</strong> https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions
 * <strong i="9">@param</strong> {ScrollOptions} [options={}] Hook options.
 * <strong i="10">@param</strong> {ScrollBehavior} [options.behavior='smooth'] Specifies whether the scrolling should animate smoothly,
 *  or happen instantly in a single jump.
 * <strong i="11">@param</strong> {number} [options.left=0] Specifies the number of pixels along the X axis to scroll the window.
 * <strong i="12">@param</strong> {number} [options.top=0] Specifies the number of pixels along the Y axis to scroll the window.
 */
function useRouterScroll({ behavior = 'smooth', left = 0, top = 0 } = {}) {
  const router = useRouter();
  useEffect(() => {
    // Scroll to given coordinates when router finishes navigating
    // This fixes an inconsistent behaviour between `<Link/>` and `next/router`
    // See https://github.com/vercel/next.js/issues/3249
    const handleRouteChangeComplete = () => {
      window.scrollTo({ top, left, behavior });
    };

    router.events.on('routeChangeComplete', handleRouteChangeComplete);

    // If the component is unmounted, unsubscribe from the event
    return () => {
      router.events.off('routeChangeComplete', handleRouteChangeComplete);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [behavior, left, top]);
}

export default useRouterScroll;

इसे अपने घटक पेड़ के शीर्ष पर कहीं भी प्रयोग करें ( _app.js काम करता है)।

// _app.js
function MyApp({ Component, pageProps }) {
  // Make sure pages scroll to the top after we navigate to them using `next/router`
  useRouterScroll();

  /* ... */
}

export default MyApp;

@nfantone ये फ़ील्ड कब बदलते हैं? behavior, left, top । आगे और पीछे मेरे लिए काम नहीं करता है।

@rakeshshubhu यह केवल next/router के माध्यम से नेविगेशन को प्रभावित करता है।

वाह... आपका मतलब है कि मुझे .then() जोड़ने के लिए प्रत्येक पृष्ठ की समीक्षा करने की आवश्यकता है! वैसे, मैं नेक्स्ट-रूट्स का उपयोग कर रहा हूं, तो क्या इसे विश्व स्तर पर जोड़ने का कोई तरीका है, बस इस कोड को एक बार जोड़ने के लिए, जैसे addRequestTransform अगर आपको एपीआई को कॉल करने से पहले कुछ हेडर जोड़ने की आवश्यकता है।

आपको नहीं करना है। मैं इसके बजाय एक मॉड्यूल बनाता हूं और इसे उन घटकों को निर्यात करता हूं जिन्हें इसकी आवश्यकता होती है। तो एक बार इसे बदलने की जरूरत है तो आप उस एक ही स्थान को बदल सकते हैं।

इसके अलावा, आप देखते हैं कि राउटर को परम के रूप में पास किया जा रहा है क्योंकि आप केवल रिएक्ट हुक का उपयोग कर सकते हैं जैसे कि एक घटक के अंदर useRouter ()

export const navigate = (event, url, router) => {
  event.preventDefault();
  event.stopPropagation();

  // Force scrolling to top
  router.push(url).then(() => window.scrollTo(0, 0));
};