Saya memiliki beberapa halaman dalam proyek reaksi saya dan, setiap kali saya beralih dari satu halaman ke halaman lain, posisi halaman dimulai dari bawah tetapi, saya ingin tetap di atas setelah merender halaman. Saat ini saya menggunakan router v5 dan, saya tidak dapat menemukan solusi untuk router v5.

Saya juga sudah mencoba solusi versi lain tetapi, itu tidak berhasil dan bisakah Anda membantu saya untuk menyelesaikan masalah ini.

Ini adalah beberapa contoh yang saya coba sejauh ini tetapi, tidak ada satu pun yang berhasil.

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  ...
</Router>
function handleUpdate() {
  let {
    action
  } = this.state.location;

  if (action === 'PUSH') {
    window.scrollTo(0, 0);
  }
}

...

<Router
  onUpdate={handleUpdate}
/>
3
zee7 29 Oktober 2019, 00:28

2 jawaban

Jawaban Terbaik

Ini adalah solusi yang saya gunakan untuk menyelesaikan masalah ini. Buat komponen baru:

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

const ScrollToTop = ({ children }) => {
  const { pathname } = useLocation();

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

  return children || null;
};

export default ScrollToTop;

Dan bungkus konten aplikasi Anda di dalamnya DI DALAM router browser

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ScrollToTop from './components/scroll-to-top/scroll-to-top';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <ScrollToTop>
          <div />
        </ScrollToTop>
      </BrowserRouter>
    </div>
  );
}

export default App;
2
Chris Sandvik 28 Oktober 2019, 21:37

Buat komponen berikutnya:

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;
}

Impor di index.js Anda dan gunakan sebelum komponen Switch, seperti ini:

  <ScrollToTop />
  <Switch>  
    ...
  </Switch>

Dan itu harus bekerja.

2
fjplaurr 28 Oktober 2019, 21:46