ReactJS错误：每个模块只允许一个默认导出 [英] ReactJS Error : Only one default export allowed per module

问题描述

该多个组件不起作用；

This multiple component doesn't work;

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
               <li><Link>Home</Link></li>
            </ul>

           {this.props.children}
         </div>
      )
   }
}

export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}

export default Home;

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
      </Route>
   </Router>

), document.getElementById('app'))

出现以下错误；

./ main.js中的错误模块构建失败：语法错误：
C：/ Users / hasithay / Desktop /reactApp/main.js：每个模块只允许一个默认导出
。

ERROR in ./main.js Module build failed: SyntaxError: C:/Users/hasithay/Desktop/reactApp/main.js: Only one default export allowed per module.

31 | } 32 |

31 | } 32 |

33 |导出默认主页；
| ^ 34 | 35 |类关于扩展React.Component {36 | render（）{

33 | export default Home; | ^ 34 | 35 | class About extends React.Component { 36 | render() {

@多主webpack：捆绑包现在有效

@ multi main webpack: bundle is now VALID

答案应该是三个可单击的链接，可用于在应用启动时更改路线。

Answer should be three clickable links that can be used to change the route When the app is started.

推荐答案

多个组件确实可以工作，但是您需要使用名称导出该组件，并且只能导出一个默认组件。

Multiple component does work but you need to export the component with name and you can only export one default component.

就像下面的示例中一样，我导出 App 组件为默认组件，其他组件 Home，About，Contact 作为命名组件。

Like in below expample I export the App Component as defalut component and other component Home, About, Contact as a named component.

命名组件，您需要使用那里的名称导入它们：

从 ./App.jsx导入{Home，About，Contact}；

导入默认组件：

导入应用来自'./App.jsx';

import React from 'react';
import {Link} from 'react-router';


class App extends React.Component {
  render() {
    return(
      <div>
      <ul>
      <li><Link to="home">Home</Link></li>
      <li><Link to="about">About</Link></li>
      <li><Link to="contact">Contact</Link></li>
      </ul>

      {this.props.children}
      </div>
    )
  }
}

export default App;



export class Home extends React.Component {
  render() {
    return (
      <h1>Home Page Content</h1>
    )
  }
}



export class About extends React.Component {
  render() {
    return (
      <h1>About Page Content</h1>
    )
  }
}


export class Contact extends React.Component {
  render()  {
    return (
      <h1>Contact Page Content</h1>
    )
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, browserHistory, IndexRoute} from 'react-router';
import App from './App.jsx';
import {Home,About,Contact} from './App.jsx';

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Contact} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>

	
), document.getElementById('app'));

不导入带有名称组件（家庭，关于，联系人）的默认组件（应用组件）。如果使用指定的组件导入它们，它们将无法正确呈现。

Don't import default component (App Component) with the name component (Home, About, Contact). if you import them with the named component they didn't render properly.

Blockquote

Blockquote

这篇关于ReactJS错误：每个模块只允许一个默认导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！