Чтобы обрабатывать прокрутку при переходах React Router, вы можете рассмотреть следующие методы:

1. Компонент ScrollToTop: создайте компонент ScrollToTop, который прокручивает окно вверх при изменении маршрута. Вы можете обернуть свои маршруты этим компонентом, чтобы обеспечить сброс положения окна при каждом переходе.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const ScrollToTop = () => {
  const { pathname } = useLocation();
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  return null;
};
export default ScrollToTop;

Оберните свои маршруты компонентом ScrollToTop:

import { BrowserRouter as Router, Route } from 'react-router-dom';
const App = () => {
  return (
    <Router>
      <ScrollToTop />
      {/* Your routes */}
    </Router>
  );
};
export default App;

2. Восстановление прокрутки: React Router предоставляет опцию scrollRestoration, которую можно использовать для управления поведением прокрутки во время переходов. Установив для scrollRestorationзначение 'auto'или 'manual', вы можете контролировать, восстанавливается ли позиция прокрутки в предыдущую позицию или нет во время маршрутизации. изменения.

import { BrowserRouter as Router, Route } from 'react-router-dom';
const App = () => {
  return (
    <Router scrollRestoration="auto">
      {/* Your routes */}
    </Router>
  );
};
export default App;

3. Внешние библиотеки: вы также можете использовать внешние библиотеки, такие как react-scrollили react-router-scroll-4, для обработки прокрутки во время переходов. Эти библиотеки предоставляют дополнительные функции и возможности настройки для управления поведением прокрутки.