ReactJS -在文件+ withRouter中处理多个输出

Question

我目前正在使用NodeJS和ReactJS进行一个网络项目。我希望在一个文件中包含两个组件，因为它们将使用相同的信息。其中一个组件是使用withRouter来处理"this.props.history.push“。因为我不知道如何处理我的两个条件(withRouter + double导出)，所以我正在寻求您的帮助。我知道错误：

Failed to compile
./src/App.js
284:83-110 './components/Dnoc_cvat.js' does not contain an export named 'Dnoc_cvat_bouton_withRouter'.

在我的App.js中，我写道：

import {Dnoc_cvat_bouton_withRouter} from './components/Dnoc_cvat.js'

Dnoc_cvat.js：

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

class Dnoc_cvat extends React.Component {
   render() {
   return( 
       <h3> DNOC - CVAT </h3>
         )
   }
}

class Dnoc_cvat_bouton extends React.Component {
   constructor(props) {
       super(props);
        this.handleClick=this.handleClick.bind(this);
   }

   handleClick(){
       this.props.history.push('/DNOC/CVAT');
   }

   render() {
   return( 
       <div className='component-button' onClick={this.handleClick} >
            <p>Hello world</p>
       </div>
         )
      }
   }

module.exports={
   Dnoc_cvat:Dnoc_cvat,
   Dnoc_cvat_bouton_withRouter:withRouter(Dnoc_cvat_bouton)
   }

Answer 1

module.exports只在Node.js中工作。

对于浏览器，需要使用以下export语法：

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

export class Dnoc_cvat extends React.Component {
  ...
}

class Dnoc_cvat_bouton extends React.Component {
  ...
}

export const Dnoc_cvat_bouton_withRouter = withRouter(Dnoc_cvat_bouton)