React Router页面切换时如何聚焦组件或恢复初始滚动状态？

一、利用React Router内置滚动恢复能力 #

如果使用React Router v6+，直接引入<ScrollRestoration>组件即可自动处理路由切换时的滚动重置，同时还会保留用户在单个页面的滚动记忆（返回时恢复位置）：

import { ScrollRestoration } from 'react-router-dom';

function App() {
  return (
    <div>
      <Routes>
        {/* 你的路由配置 */}
      </Routes>
      <ScrollRestoration />
    </div>
  );
}

若使用React Router v5及更早版本，可通过监听路由变化手动重置滚动：

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

function App() {
  const history = useHistory();

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

  return (
    {/* 应用内容 */}
  );
}

二、聚焦页面内指定组件 #

如果需要路由切换后直接定位到页面内某个组件，可在目标页面通过useRef获取DOM节点，再调用scrollIntoView：

import { useEffect, useRef } from 'react';

function TargetPage() {
  const focusRef = useRef(null);

  useEffect(() => {
    // 路由进入时滚动到指定组件，可添加平滑过渡效果
    focusRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, []);

  return (
    <div>
      {/* 页面其他内容 */}
      <div ref={focusRef} className="focus-target">
        需要聚焦的组件
      </div>
    </div>
  );
}

三、处理嵌套滚动容器 #

如果页面滚动条来自某个嵌套的div容器，而非全局窗口，需针对该容器单独重置：

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

function PageWithNestedScroll() {
  const scrollContainer = useRef(null);
  const location = useLocation();

  useEffect(() => {
    // 路由切换时重置嵌套容器的滚动位置
    scrollContainer.current?.scrollTo(0, 0);
  }, [location.pathname]);

  return (
    <div ref={scrollContainer} style={{ height: '600px', overflow: 'auto' }}>
      {/* 长内容区域 */}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Eduardo Fellipe