迁移至React Router v6时RouteComponentProps导出错误的解决方法

问题根源 #

React Router v6已完全移除了RouteComponentProps类型/接口，同时你当前的withRouter实现将路由相关属性嵌套在router对象中，导致类组件无法直接通过this.props.location访问到目标属性。

修复步骤 #

1. 调整withRouter实现

修改包装器，将路由属性直接传递给组件的顶层props（对齐v5的withRouter行为）：

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

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    // 直接把路由属性挂载到props顶层，而非嵌套在router对象
    return <Component {...props} location={location} navigate={navigate} params={params} />;
  }

  return ComponentWithRouterProp;
}

export default withRouter;

2. 修改类组件代码

移除RouteComponentProps的导入和依赖，调整props类型（TypeScript场景）或直接去掉类型标注（JavaScript场景）：

TypeScript版本

import { Route, Routes } from "react-router-dom";
import React from "react";

// 自定义路由props类型，替代已移除的RouteComponentProps
interface RouterProps {
  location: ReturnType<typeof useLocation>;
  navigate: ReturnType<typeof useNavigate>;
  params: ReturnType<typeof useParams>;
}

class App extends React.Component<RouterProps, IState> {
  constructor(props: RouterProps) {
    super(props);
    this.state = {
      prop1: null
    };
  }
   
  componentDidMount() {
    if (this.props.location.pathname === "/test") {
      window.location.reload();
    }
  };

  render() {
    return (
      <Routes>
        <Route path="/test" element={<Test />} />
      </Routes>
    )
  }
}
 
export default withRouter(App);

JavaScript版本

import { Route, Routes } from "react-router-dom";
import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      prop1: null
    };
  }
   
  componentDidMount() {
    if (this.props.location.pathname === "/test") {
      window.location.reload();
    }
  };

  render() {
    return (
      <Routes>
        <Route path="/test" element={<Test />} />
      </Routes>
    )
  }
}
 
export default withRouter(App);

核心说明 #

• v6不再提供RouteComponentProps，需自行定义所需的路由属性类型
• 调整withRouter的属性传递方式，确保类组件能直接访问location、navigate等属性，无需嵌套读取

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