如何在React Router V5中实现页面跳转时默认滚动到顶部？

• 你当前用useRouteMatch()返回的path是路由匹配的模式字符串（比如/problems/:problemId/edit），同路由模式下参数变化时该值不会更新，导致useEffect监听的依赖没有变化，滚动逻辑从未触发
• ScrollToTop组件放在了ProblemList子路由组件内部，仅在该路由匹配时才会初始化，全局路由跳转无法覆盖
• 现有代码Redirect逻辑存在路径错误：占位符/:problemId没有替换为真实的问题ID，跳转后路径不符合预期，本质上没有产生有效路径变化

1. 重写 ScrollToTop 组件 #

改用useLocation获取真实访问路径作为依赖，确保每次路径变化都触发滚动逻辑：

// ScrollToTop.js
import { useEffect } from "react";
import { useLocation } from "react-router-dom";

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

  useEffect(() => {
    // 适配window作为滚动容器的场景
    window.scrollTo({
      top: 0,
      left: 0
    });
    // 若滚动容器为自定义div，替换为以下逻辑：
    // const container = document.querySelector('.你的滚动容器类名')
    // if (container) container.scrollTop = 0
  }, [pathname]);

  return null;
};

2. 调整组件放置位置 #

将ScrollToTop放在全局路由的最外层，直接作为BrowserRouter/HashRouter的子节点，确保所有路由跳转都能触发逻辑，无需在每个子路由重复引入：

// App.js 示例
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import { ScrollToTop } from './commons/scrolling/ScrollToTop'
import { ProblemList } from './pages/ProblemList'

function App() {
  return (
    <Router>
      <ScrollToTop />
      <div className="App">
        <Switch>
          <Route path="/problems" component={ProblemList} />
          {/* 其余路由配置 */}
        </Switch>
      </div>
    </Router>
  )
}

3. 修复 Redirect 路径错误 #

将占位符替换为真实的问题ID，同时使用绝对路径避免路径拼接错误：

// ProblemList.js 中对应逻辑修改为
{shouldRedirect ? <Redirect to={`/problems/${currentProblem.id}/edit`}/> : null}

4. 清理冗余代码 #

删除ProblemList组件内引入的<ScrollToTop />，避免重复初始化。

内容的提问来源于stack exchange，提问作者NeoZoom.lua