React报错：‘withRouter’在‘react-router’中未找到，求新版适配方案

React Router v6及以上版本已经移除了withRouter高阶组件，直接从react-router导入自然会报找不到的错误。下面提供两种适配方案，你可以根据需求选择：

方案一：自定义withRouter高阶组件（保留类组件） #

如果想继续使用类组件，可以自己封装一个withRouter来替代官方版本：

1. 先实现自定义的withRouter：

import { useLocation, useNavigate, useParams } from 'react-router-dom';

const withRouter = (Component) => {
  const Wrapper = (props) => {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    
    return (
      <Component
        {...props}
        history={{
          push: navigate,
          location,
          params,
          // 模拟history.listen，结合useEffect实现路由监听
          listen: (callback) => {
            callback(location);
            return () => {};
          }
        }}
      />
    );
  };
  return Wrapper;
};

2. 修改你的组件代码：
   把原有的import { withRouter } from "react-router";替换成自定义的withRouter，导出方式保持不变。不过更建议在组件内部结合useEffect处理路由监听逻辑，这样更贴合v6的设计。

方案二：转为函数组件（推荐，符合v6设计） #

React Router v6更推荐函数组件+hooks的写法，把类组件改成函数组件会更简洁：

修改后的完整代码：

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

const parseJwt = (token) => {
  try {
    return JSON.parse(atob(token.split('.')[1]));
  } catch (e) {
    return null;
  }
};

const AuthVerify = ({ logOut }) => {
  const location = useLocation();

  useEffect(() => {
    const checkTokenExpiry = () => {
      const user = JSON.parse(localStorage.getItem("user"));
      if (user) {
        const decodedJwt = parseJwt(user.accessToken);
        if (decodedJwt.exp * 1000 < Date.now()) {
          logOut();
        }
      }
    };

    // 初始加载时检查一次token
    checkTokenExpiry();

    // 路由变化时自动触发effect，无需手动调用listen
  }, [location, logOut]);

  return <div></div>;
};

export default AuthVerify;

说明：

• 用useLocation钩子获取当前路由状态，路由变化时location会更新，自动触发useEffect重新执行检查逻辑。
• 依赖项[location, logOut]确保路由变化或logOut方法更新时，都会重新校验token有效性。

额外注意 #

• 确保项目安装的是react-router-dom（而非react-router），所有路由相关的API都从react-router-dom导入。
• 其他使用withRouter的类组件，都可以参照上述两种方式进行适配。

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