Next.js: Router.push('/link')는 트리거될 때 페이지 상단으로 스크롤하지 않습니다.

맨 위로 스크롤할지 여부는 사용자가 결정합니다. componentDidMount 에 할 수 있다고 생각합니다.

scrollreset 옵션이 있어야 한다는 데 동의합니다. componentDidMount Router.push('/link').then(() => window.scrollTo(0, 0)); $ 할 수도 있습니다.

Router.push('/link').then(() => window.scrollTo(0, 0)); 이것이 올바른 방법입니다. 언제든지 readme @gragland 에 추가하세요 ❤️

@gralagland 에게 감사합니다. 귀하의 솔루션은 그렇게 추악하지 않은 것 같지만 DRY 원칙을 유지하기 위해 그러한 옵션이 있으면 좋을 것입니다. 현재로서는 유일한 빠른 해결책은 이것을 작성할 라이브 템플릿을 만드는 것입니다 😅

와우... .then() 를 추가하려면 모든 단일 페이지를 검토해야 한다는 뜻입니다! 그건 그렇고, 저는 next-routes 를 사용하고 있으므로 API를 호출하기 전에 헤더를 추가해야 하는 경우 addRequestTransform 와 같이 이 코드를 한 번만 추가하면 됩니다.

@MBach 대상 구성 요소의 componentDidMount 에 $ window.scrollTo(0, 0) 를 연결할 수도 있습니다.

나는 이 행동이 매우 놀랍다는 것을 알았다고 말하고 싶습니다. 거의 1년 동안 Next.js로 프로덕션 사이트를 구축해 왔지만 Router.push 가 맨 위로 돌아가지 않는다는 것을 이제서야 발견했습니다. 저는 항상 Router.push 가 <Link> 처럼 행동한다고 ​​생각했습니다.

그리고 <a> 대 <Link> 와 같은 기본 동작을 일치시키는 측면에서 보면 Router.push에 해당하는 비 SPA는 Router.push window.location 를 설정하는 것처럼 보일 수도 있습니다. 페이지 맨 위로, 아니? 그것은 나에게 기본 동작으로 더 이해가 될 것입니다.

@gragland 작동하지 않습니다

전역적으로 작동하도록 하려면 내장된 next.js 라우터 이벤트 리스너 Router.events.on('routeChangeComplete', () => { window.scrollTo(0, 0); }); 를 사용할 수 있습니다.
헤더와 같은 모든 페이지에서 공유되는 구성 요소에 이것을 배치하기만 하면 됩니다.

@timneutkens 명령형 Router.push 및 <Link> 에 대한 기본 스크롤 동작이 다른 이유가 있습니까? 그들이 다르게 행동한다는 명백한 버그처럼 보입니다.

Router.back()은 약속을 반환하지 않지만 동일한 문제가 있습니다. 수동으로 위로 스크롤하면 어떻게 해야 합니까?

@alexsenichev @macmenak 솔루션을 사용해 보셨습니까?

<Link href="/product/[id]" as={ /product/${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, Router.push options 에 +1을 추가하면 이전 버전과의 호환성을 유지할 수 있습니다.

이것을 사용하여 페이지 상단으로 라우팅하고 스크롤할 수 있습니다.

// 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},
})

Btw, 이것은 Link 동작만큼 사용자 경험이 좋지 않습니다. 다음 페이지가 로드되는 대신 페이지 상단으로 즉시 스크롤하기 때문입니다.

관심 있는 사람들을 위해 여기에 관련 문제를 추가했습니다: https://github.com/vercel/next.js/issues/15206

FWIW, 다음은 관련 문제에서 공유된 해결 방법에 대한 제 의견입니다.

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() 를 추가하려면 모든 단일 페이지를 검토해야 한다는 뜻입니다! 그건 그렇고, 저는 next-routes 를 사용하고 있으므로 API를 호출하기 전에 헤더를 추가해야 하는 경우 addRequestTransform 와 같이 이 코드를 한 번만 추가하면 됩니다.

당신은 할 필요가 없습니다. 대신 하나의 모듈을 만들어 필요한 구성 요소로 내보냅니다. 따라서 일단 변경이 필요하면 한 곳에서 변경해야 합니다.

또한 컴포넌트 내부에서 React Hooks(예: useRouter())만 사용할 수 있기 때문에 라우터를 param으로 전달하고 있음을 알 수 있습니다.

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

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