React Router v5迁移withRouter至v6：类组件替代方案咨询

架构老林

2026-8-4

React Router 移除withRouter后类组件的替代方案

不需要把所有类组件改成函数组件，React Router v6+虽移除了官方withRouter高阶组件，但类组件依然有可行的替代方案，以下是两种常用方法：

方案1：自定义withRouter高阶组件（适配现有类组件）

自己实现一个简易版withRouter，利用React Router提供的hooks为类组件注入路由相关属性，完全兼容原有代码结构：

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

// 自定义withRouter高阶组件
const withRouter = (Component) => {
  const RouterWrapper = (props) => {
    const navigate = useNavigate();
    const location = useLocation();
    const params = useParams();
    return <Component {...props} navigate={navigate} location={location} params={params} />;
  };
  return RouterWrapper;
};

替换原有导出语句即可，用法和之前完全一致：

export default withRouter(connect(state => ({
  user: state.user
}), {loadUserCurrent})(Home));

方案2：逐步迁移至函数组件（可选）

如果后续计划重构代码，可以将类组件改为函数式，用Redux的useSelector/useDispatch替代connect，同时直接在组件内使用React Router的hooks：

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

const Home = () => {
  const user = useSelector(state => state.user);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const location = useLocation();
  const params = useParams();

  // 调用action示例：dispatch(loadUserCurrent())

  return (
    <Container>
      
    </Container>
  );
};

export default Home;