react-router-dom v6中withRouter导出不存在的报错原因咨询

报错原因 #

你用的react-router-dom版本是v6.21.1，这个版本已经彻底移除了withRouter高阶组件——它是React Router v5及更早版本的API，v6里不再提供。所以你在TopScroll.js里尝试导入并使用withRouter，就会触发"找不到导出"的错误。

另外v6也废弃了旧的history对象，改用路由钩子来实现路由监听等功能。

修复方案 #

直接修改TopScroll.js，用v6内置的useLocation钩子替代原来的实现：

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

function TopScroll({ children }) {
  const location = useLocation();

  useEffect(() => {
    // 路由切换时滚动到页面顶部
    window.scrollTo(0, 0);
  }, [location.pathname]); // 监听路由路径变化

  return <Fragment>{children}</Fragment>;
}

export default TopScroll;

额外注意 #

你的App.js里还导入了Redirect，但v6里Redirect已经被Navigate组件取代，如果后续需要重定向功能，要改成import { Navigate } from 'react-router-dom'；如果暂时用不到，直接删掉Redirect的导入即可。

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