React类组件继承withRouter包装组件报错：Class constructor cannot be invoked without 'new'

问题原因 #

withRouter是React Router提供的高阶组件（HOC），它接收一个组件类作为参数后，返回的是经过包装的组件函数，而非原始的Class A类。当你在B组件里import A from './A'时，导入的是被withRouter包装后的函数，而不是原本的A类。ES6类只能继承另一个类，不能直接继承普通函数，这就导致了"Class constructor cannot be invoked without 'new'"的错误——因为B尝试继承的是一个函数，不是可被new调用的类构造器。

保留结构的解决方法 #

核心是让B继承原始的Class A类，而非被withRouter包装后的版本，修改代码如下：

Class A 修改 #

保留命名导出的原始类，默认导出仍用withRouter包装：

import React from 'react';
import { withRouter } from 'react-router-dom';

// 保留命名导出，供B组件继承
export class A extends React.Component {

}

// 默认导出仍为withRouter包装后的组件，其他地方可正常使用
export default withRouter(A);

Class B 修改 #

导入A的命名导出而非默认导出，再用withRouter包装B：

import React from 'react';
import { withRouter } from 'react-router-dom';

// 导入原始的A类，不是被withRouter包装后的版本
import { A } from './A';

export class B extends A {

}

export default withRouter(B);

这样B继承的是原始A类，同时A和B各自都能通过withRouter获取路由相关Props，原有结构完全保留。

与Babel/Router版本的关系 #

• Router版本：这个问题和React Router版本关联不大，只要是使用withRouter作为HOC的版本（比如v4及以上）都会存在该问题，因为HOC的本质就是返回包装后的组件函数，而非原始类。
• Babel版本/配置：如果Babel配置未正确转译ES6类继承（比如用了过于老旧的版本，或未配置@babel/preset-react、@babel/preset-env处理类语法），可能会让错误表现更明显，但核心原因还是继承对象错误。只要确保Babel能正确转译ES6类，配合上面的修改就能解决问题。

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