React中useLocation引发组件重复渲染，需实现页面切换自动回顶

需求是每次页面路径变化时自动将屏幕滚动至顶部，但直接在组件中使用useLocation()会导致整个组件重复渲染。

问题分析 #

在组件内通过useLocation()获取路由状态时，路由变化会触发location对象更新，进而导致组件及子组件重复渲染，造成不必要的性能损耗。

解决方案 #

1. 抽离独立的滚动控制组件

把滚动到顶部的逻辑单独封装成组件，与页面路由组件解耦，避免影响其他组件的渲染：

import React, { useEffect } from 'react'
import { BrowserRouter, Routes, Route, useLocation, Link } from "react-router-dom";

const Home = () => {
  console.log("Home Render");
  return (<><Link to="/p1">Page1</Link> | <Link to="/p2">Page2</Link></>);
}

// 仅负责路由切换时滚动到顶部的组件
const ScrollToTop = () => {
  const location = useLocation();

  useEffect(() => {
    // 滚动至页面顶部，可选添加平滑滚动效果
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [location.pathname]); // 仅监听路径变化，而非整个location对象

  return null; // 无需渲染DOM元素
}

const Pages = () => {
  return (
    <>
      <ScrollToTop />
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path="p1" element={<Home />} />
          <Route path="p2" element={<Home />} />
        </Route>
      </Routes>
    </>
  )
}

export function App(props) {
  return (
    <BrowserRouter>
      <Pages />
    </BrowserRouter>
  );
}

2. 优化子组件避免无意义渲染

如果子组件（如Home）在路由切换时内容无需更新，用React.memo包裹子组件，阻止不必要的重复渲染：

// 用React.memo包裹Home组件
const Home = React.memo(() => {
  console.log("Home Render");
  return (<><Link to="/p1">Page1</Link> | <Link to="/p2">Page2</Link></>);
});

关键说明 #

• 独立的ScrollToTop组件只会在路由路径变化时执行滚动操作，不会干扰其他组件的渲染逻辑。
• 使用location.pathname作为useEffect的依赖，比整个location对象更精准，避免因search、hash等属性变化触发不必要的滚动。

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