ReactJS多组件导出结合withRouter的语法问题求助

嘿，我懂你遇到的麻烦了——把两个共用信息的组件放在同一个文件里，其中一个需要靠withRouter来实现this.props.history.push功能，但导出后导入时报错找不到对应组件。这大概率是你在处理withRouter包装后的组件导出时，语法或者命名没搞对。

我给你两种实用的写法，你可以按需选择：

方法一：先包装组件再导出 #

先定义好两个组件，把需要路由能力的那个用withRouter包装后，再和另一个组件一起做命名导出：

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

// 第一个不需要路由能力的普通组件
const Dnoc_cvat = () => {
  return <div>这是共享信息的普通组件</div>;
};

// 第二个需要路由跳转的基础组件
const Dnoc_cvat_bou_base = (props) => {
  // 类组件可以用this.props.history.push，函数组件直接用props.history.push
  const handleJump = () => {
    props.history.push('/your-target-path');
  };

  return (
    <button onClick={handleJump}>点击跳转页面</button>
  );
};

// 用withRouter包装需要路由能力的组件
const Dnoc_cvat_bou = withRouter(Dnoc_cvat_bou_base);

// 同时导出两个组件
export { Dnoc_cvat, Dnoc_cvat_bou };

方法二：导出环节直接包装组件 #

这种写法更简洁，不需要额外定义中间组件：

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

// 直接导出第一个普通组件
export const Dnoc_cvat = () => {
  return <div>这是共享信息的普通组件</div>;
};

// 定义需要路由能力的组件
const Dnoc_cvat_bou_base = (props) => {
  const handleJump = () => {
    props.history.push('/your-target-path');
  };

  return (
    <button onClick={handleJump}>点击跳转页面</button>
  );
};

// 导出时直接用withRouter包装目标组件
export const Dnoc_cvat_bou = withRouter(Dnoc_cvat_bou_base);

之后在你的App.js里，就可以正常导入这两个组件了：

import { Dnoc_cvat, Dnoc_cvat_bou } from './components/Dnoc_cvat.js';

额外提醒：React Router v6的情况 #

如果你用的是React Router v6版本，withRouter已经被官方弃用了，推荐用useNavigate钩子替代，写法更简单，完全不需要包装：

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

export const Dnoc_cvat = () => {
  return <div>这是共享信息的普通组件</div>;
};

export const Dnoc_cvat_bou = () => {
  const navigate = useNavigate();
  
  const handleJump = () => {
    navigate('/your-target-path');
  };

  return (
    <button onClick={handleJump}>点击跳转页面</button>
  );
};

这样就彻底不用纠结withRouter和多导出的冲突问题啦，直接导入使用就行。

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