Saya mengalami masalah saat menavigasi ke halaman lain, posisinya akan tetap seperti halaman sebelumnya. Jadi itu tidak akan bergulir ke atas secara otomatis. Saya juga mencoba menggunakan window.scrollTo(0, 0)di onChangerouter. Saya juga pernah scrollBehaviormemperbaiki masalah ini tetapi tidak berhasil. Ada saran tentang ini?

Dokumentasi untuk React Router v4 berisi contoh kode untuk pemulihan gulir. Berikut adalah contoh kode pertama mereka, yang berfungsi sebagai solusi seluruh situs untuk "gulir ke atas" saat halaman dinavigasi ke:

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)

Kemudian render di bagian atas aplikasi Anda, tetapi di bawah Router:

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

// or just render it bare anywhere you want, but just one :)
<ScrollToTop/>

^ disalin langsung dari dokumentasi

Jelas ini berfungsi untuk banyak kasus, tetapi ada lebih banyak tentang cara menangani antarmuka tab dan mengapa solusi umum belum diterapkan.

tetapi kelasnya begitu 2018

Implementasi ScrollToTop dengan React Hooks

ScrollToTop.js

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

Pemakaian:

<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>

ScrollToTop juga dapat diimplementasikan sebagai komponen pembungkus:

ScrollToTop.js

import React, { useEffect, Fragment } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history, children }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return <Fragment>{children}</Fragment>;
}

export default withRouter(ScrollToTop);

Pemakaian:

<Router>
  <ScrollToTop>
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </ScrollToTop>
</Router>

Jawaban ini untuk kode lama, untuk router v4 + periksa jawaban lain

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  ...
</Router>

Jika tidak berhasil, Anda harus menemukan alasannya. Juga di dalamcomponentDidMount

document.body.scrollTop = 0;
// or
window.scrollTo(0,0);

Anda bisa menggunakan:

componentDidUpdate() {
  window.scrollTo(0,0);
}

Anda dapat menambahkan beberapa bendera seperti "scrolled = false" dan kemudian memperbarui:

componentDidUpdate() {
  if(this.scrolled === false){
    window.scrollTo(0,0);
    scrolled = true;
  }
}

Untuk react-router v4 , berikut adalah aplikasi create-react yang mencapai pemulihan gulir: http://router-scroll-top.surge.sh/ .

Untuk mencapai ini, Anda dapat membuat menghias Routekomponen dan memanfaatkan metode siklus hidup:

import React, { Component } from 'react';
import { Route, withRouter } from 'react-router-dom';

class ScrollToTopRoute extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.path === this.props.location.pathname && this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    const { component: Component, ...rest } = this.props;

    return <Route {...rest} render={props => (<Component {...props} />)} />;
  }
}

export default withRouter(ScrollToTopRoute);

Di bagian componentDidUpdatekita dapat memeriksa kapan nama path lokasi berubah dan mencocokkannya dengan pathprop dan, jika mereka puas, mengembalikan window scroll.

Yang keren dari pendekatan ini, adalah kita dapat memiliki rute yang memulihkan gulir dan rute yang tidak mengembalikan gulir.

Berikut adalah App.jscontoh bagaimana Anda dapat menggunakan yang di atas:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Lorem from 'react-lorem-component';
import ScrollToTopRoute from './ScrollToTopRoute';
import './App.css';

const Home = () => (
  <div className="App-page">
    <h2>Home</h2>
    <Lorem count={12} seed={12} />
  </div>
);

const About = () => (
  <div className="App-page">
    <h2>About</h2>
    <Lorem count={30} seed={4} />
  </div>
);

const AnotherPage = () => (
  <div className="App-page">
    <h2>This is just Another Page</h2>
    <Lorem count={12} seed={45} />
  </div>
);

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <div className="App-header">
            <ul className="App-nav">
              <li><Link to="/">Home</Link></li>
              <li><Link to="/about">About</Link></li>
              <li><Link to="/another-page">Another Page</Link></li>
            </ul>
          </div>
          <Route exact path="/" component={Home} />
          <ScrollToTopRoute path="/about" component={About} />
          <ScrollToTopRoute path="/another-page" component={AnotherPage} />
        </div>
      </Router>
    );
  }
}

export default App;

Dari kode di atas, yang menarik untuk ditunjukkan adalah bahwa hanya ketika menavigasi ke /aboutatau /another-pagetindakan gulir ke atas yang akan dilakukan. Namun ketika /tidak ada pemulihan gulir yang akan terjadi.

Seluruh basis kode dapat ditemukan di sini: https://github.com/rizedr/react-router-scroll-top

Perlu dicatat bahwa onUpdate={() => window.scrollTo(0, 0)}metode ini sudah usang.

Berikut adalah solusi sederhana untuk react-router 4+.

const history = createBrowserHistory()

history.listen(_ => {
    window.scrollTo(0, 0)  
})

<Router history={history}>

Jika Anda menjalankan React 16.8+, ini mudah ditangani dengan komponen yang akan menggulir jendela ke atas pada setiap navigasi:
Ini di komponen scrollToTop.js

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Kemudian render di bagian atas aplikasi Anda, tetapi di bawah Router, di
sini ada di app.js

import ScrollToTop from "./scrollToTop";

function App() {
  return (
    <Router>
      <ScrollToTop />
      <App />
    </Router>
  );
}

atau di index.js

import ScrollToTop from "./scrollToTop";

ReactDOM.render(
    <BrowserRouter>
        <ScrollToTop />
        <App />
    </BrowserRouter>
    document.getElementById("root")
);

React Hook yang dapat Anda tambahkan ke komponen Route Anda. Menggunakan useLayoutEffectalih-alih pendengar khusus.

import React, { useLayoutEffect } from 'react';
import { Switch, Route, useLocation } from 'react-router-dom';

export default function Routes() {
  const location = useLocation();
  // Scroll to top if path changes
  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return (
      <Switch>
        <Route exact path="/">

        </Route>
      </Switch>
  );
}

Pembaruan : Diperbarui untuk digunakan useLayoutEffectsebagai pengganti useEffect, untuk mengurangi visual jank. Secara kasar ini diterjemahkan menjadi:

• useEffect: membuat komponen -> cat ke layar -> gulir ke atas (efek run)
• useLayoutEffect: membuat komponen -> gulir ke atas (efek run) -> cat ke layar

Bergantung pada apakah Anda memuat data (pikirkan pemintal) atau jika Anda memiliki animasi transisi halaman, useEffectmungkin bekerja lebih baik untuk Anda.

Saya memiliki masalah yang sama dengan aplikasi saya, menggunakan potongan kode di bawah ini membantu saya menggulir ke bagian atas halaman dengan mengklik tombol berikutnya.

<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory}>
...
</Router>

Namun, masalah masih berlanjut di browser belakang. Setelah banyak percobaan, saya menyadari bahwa ini karena objek riwayat jendela browser, yang memiliki properti scrollRestoration yang disetel ke auto.Menyetel ini ke manual memecahkan masalah saya.

function scrollToTop() {
    window.scrollTo(0, 0)
    if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
    }
}

<Router onUpdate= {scrollToTop} history={browserHistory}>
....
</Router>

Dalam komponen di bawah ini <Router>

Cukup tambahkan React Hook (jika Anda tidak menggunakan kelas React)

  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [props.location]);

Saya ingin membagikan solusi saya untuk mereka yang menggunakan react-router-dom v5karena tidak ada solusi v4 yang berhasil untuk saya.

Apa yang memecahkan masalah saya adalah menginstal react-router-scroll-top dan meletakkan pembungkusnya <App />seperti ini:

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

dan hanya itu! itu berhasil!

Hooks dapat disusun, dan sejak React Router v5.1 kami memiliki useHistory()hook. Jadi berdasarkan jawaban @ zurfyx, saya telah membuat pengait yang dapat digunakan kembali untuk fungsi ini:

// useScrollTop.ts
import { useHistory } from 'react-router-dom';
import { useEffect } from 'react';

/*
 * Registers a history listener on mount which
 * scrolls to the top of the page on route change
 */
export const useScrollTop = () => {
    const history = useHistory();
    useEffect(() => {
        const unlisten = history.listen(() => {
            window.scrollTo(0, 0);
        });
        return unlisten;
    }, [history]);
};

Solusi saya: komponen yang saya gunakan di komponen layar saya (di mana saya ingin gulir ke atas).

import { useLayoutEffect } from 'react';

const ScrollToTop = () => {
    useLayoutEffect(() => {
        window.scrollTo(0, 0);
    }, []);

    return null;
};

export default ScrollToTop;

Ini mempertahankan posisi gulir saat kembali. Menggunakan useEffect () adalah buggy bagi saya, ketika kembali dokumen akan bergulir ke atas dan juga memiliki efek berkedip ketika rute diubah dalam dokumen yang sudah digulir.

React hooks 2020 :)

import React, { useLayoutEffect } from 'react';
import { useLocation } from 'react-router-dom';

const ScrollToTop: React.FC = () => {
  const { pathname } = useLocation();
  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

export default ScrollToTop;

Saya menulis Komponen Tingkat Tinggi bernama withScrollToTop. HOC ini mengambil dua tanda:

• onComponentWillMount- Apakah akan menggulir ke atas saat navigasi ( componentWillMount)
• onComponentDidUpdate- Apakah akan menggulir ke atas saat update ( componentDidUpdate). Bendera ini diperlukan jika komponen tidak dilepas tetapi peristiwa navigasi terjadi, misalnya, dari /users/1ke /users/2.

// @flow
import type { Location } from 'react-router-dom';
import type { ComponentType } from 'react';

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

type Props = {
  location: Location,
};

type Options = {
  onComponentWillMount?: boolean,
  onComponentDidUpdate?: boolean,
};

const defaultOptions: Options = {
  onComponentWillMount: true,
  onComponentDidUpdate: true,
};

function scrollToTop() {
  window.scrollTo(0, 0);
}

const withScrollToTop = (WrappedComponent: ComponentType, options: Options = defaultOptions) => {
  return class withScrollToTopComponent extends Component<Props> {
    props: Props;

    componentWillMount() {
      if (options.onComponentWillMount) {
        scrollToTop();
      }
    }

    componentDidUpdate(prevProps: Props) {
      if (options.onComponentDidUpdate &&
        this.props.location.pathname !== prevProps.location.pathname) {
        scrollToTop();
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default (WrappedComponent: ComponentType, options?: Options) => {
  return withRouter(withScrollToTop(WrappedComponent, options));
};

Untuk menggunakannya:

import withScrollToTop from './withScrollToTop';

function MyComponent() { ... }

export default withScrollToTop(MyComponent);

Ini metode lain.

Untuk react-router v4 Anda juga dapat mengikat pendengar untuk mengubah peristiwa sejarah, dengan cara berikut:

let firstMount = true;
const App = (props) => {
    if (typeof window != 'undefined') { //incase you have server-side rendering too             
        firstMount && props.history.listen((location, action) => {
            setImmediate(() => window.scrollTo(0, 0)); // ive explained why i used setImmediate below
        });
        firstMount = false;
    }

    return (
        <div>
            <MyHeader/>            
            <Switch>                            
                <Route path='/' exact={true} component={IndexPage} />
                <Route path='/other' component={OtherPage} />
                // ...
             </Switch>                        
            <MyFooter/>
        </div>
    );
}

//mounting app:
render((<BrowserRouter><Route component={App} /></BrowserRouter>), document.getElementById('root'));

Level gulir akan diatur ke 0 tanpa setImmediate()juga jika rute diubah dengan mengklik tautan tetapi jika pengguna menekan tombol kembali pada browser maka itu tidak akan berfungsi karena browser mengatur ulang level gulir secara manual ke level sebelumnya ketika tombol kembali ditekan , jadi dengan menggunakan setImmediate()kami menyebabkan fungsi kami dijalankan setelah browser selesai mengatur ulang level gulir sehingga memberi kami efek yang diinginkan.

dengan router React dom v4 Anda dapat menggunakan

buat komponen scrollToTopComponent seperti di bawah ini

class ScrollToTop extends Component {
    componentDidUpdate(prevProps) {
      if (this.props.location !== prevProps.location) {
        window.scrollTo(0, 0)
      }
    }

    render() {
      return this.props.children
    }
}

export default withRouter(ScrollToTop)

atau jika Anda menggunakan tab, gunakan sesuatu seperti di bawah ini

class ScrollToTopOnMount extends Component {
    componentDidMount() {
      window.scrollTo(0, 0)
    }

    render() {
      return null
    }
}

class LongContent extends Component {
    render() {
      <div>
         <ScrollToTopOnMount/>
         <h1>Here is my long content page</h1>
      </div>
    }
}

// somewhere else
<Route path="/long-content" component={LongContent}/>

semoga ini membantu untuk lebih lanjut tentang restorasi gulir, ada docs hare react router dom scroll restoration

Saya menemukan itu ReactDOM.findDomNode(this).scrollIntoView()berhasil. Saya menempatkannya di dalam componentDidMount().

Untuk aplikasi yang lebih kecil, dengan 1-4 rute, Anda dapat mencoba meretasnya dengan pengalihan ke elemen DOM teratas dengan #id, bukan hanya sebuah rute. Maka tidak perlu menggabungkan Rute di ScrollToTop atau menggunakan metode siklus hidup.

Di Anda router.js, tambahkan saja fungsi ini di routerobjek. Ini akan berhasil.

scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    },

Seperti ini,

**Routes.js**

import vue from 'blah!'
import Router from 'blah!'

let router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    },
    routes: [
            { url: "Solar System" },
            { url: "Milky Way" },
            { url: "Galaxy" },
    ]
});

render() {
    window.scrollTo(0, 0)
    ...
}

Bisa menjadi solusi sederhana jika props tidak diubah dan componentDidUpdate () tidak aktif.

Ini hacky (tapi berhasil): Saya hanya menambahkan

window.scrollTo (0,0);

untuk merender ();