React类无法导出问题排查：withRouter相关导入不匹配错误

你的问题根本不是withRouter的问题，而是导出和导入的语法不匹配导致的！

问题分析 #

你在coachDashMain.js里用的是默认导出：

export default withRouter(CoachDashMain);

但在其他文件里却用了命名导入的语法：

import {CoachDashMain} from './components/Coach/coachDashMain'

这两种语法完全不兼容，所以才会抛出“找不到名为CoachDashMain的导出项”的错误。

两种解决方案任选其一： #

方案1：修改导入语句（推荐，适配你的默认导出写法）

把导入改成默认导入的语法，去掉包裹的花括号即可：

import CoachDashMain from './components/Coach/coachDashMain'

方案2：修改导出语句为命名导出

如果你想保留命名导入的方式，可以调整导出逻辑为命名导出：

// 方式一：直接定义并导出包装后的组件
export const CoachDashMain = withRouter(class CoachDashMain extends Component {
  render() {
    return(
      <div>
        <HeaderAdmin />
        <DashBoxes />
        <MetaData />
      </div>
    );
  }
});

// 方式二：先定义类再单独导出
class CoachDashMain extends Component {
  render() {
    return(
      <div>
        <HeaderAdmin />
        <DashBoxes />
        <MetaData />
      </div>
    );
  }
}
export const CoachDashMainWithRouter = withRouter(CoachDashMain);
// 此时导入要对应改成 {CoachDashMainWithRouter}

补充说明 #

• 默认导出：一个文件只能有一个默认导出，导入时可以自定义组件名称，不需要花括号。
• 命名导出：一个文件可以有多个命名导出，导入时必须使用对应的名称和花括号包裹。

你的代码里withRouter只是给组件添加了路由相关的props，本身不会影响导出逻辑，核心问题就是导出与导入的语法不匹配～

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