1. ScrollRestoration (React Router v6.4 ve üzeri) 23. Bu yöntem, modern React Router uygulamaları için önerilir 2.

   ScrollRestoration

   bileşeni, route değişikliklerinde scroll pozisyonlarını hatırlar ve geri yükler 2. Kullanımı için:

import { ScrollRestoration } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <ScrollRestoration />
      <Routes>
        {/* Rotalar burada */}
      </Routes>
    </BrowserRouter>
  );
}
``` [2](https://nulldog.com/react-router-scroll-to-top-on-route-change).

2. **useLayoutEffect** [1](https://dev.to/kunalukey/scroll-to-top-when-route-changes-reactjs-react-router-3bgn)[2](https://nulldog.com/react-router-scroll-to-top-on-route-change). Bu hook, route değişiklikleri sırasında daha fazla kaydırma kontrolü sağlar [2](https://nulldog.com/react-router-scroll-to-top-on-route-change). Kullanımı için:
```javascript
import { useLayoutEffect } from 'react';
function Layout() {
  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, []);
  return (
    // Layout içeriği burada
  );
}
``` [2](https://nulldog.com/react-router-scroll-to-top-on-route-change).

Ayrıca, her route bileşeninde `useEffect` ve `window.scrollTo` kullanarak manuel kaydırma da yapılabilir [2](https://nulldog.com/react-router-scroll-to-top-on-route-change).
Kopyala