ReactJS错误:每个模块只允许一次默认导出

Question

这个多组件不起作用;

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中的错误模块构建失败:SyntaxError:C:/Users/hasithay/Desktop/reactApp/main.js:每个模块只允许一次默认导出.

31 | } 32 |

33 | 出口默认首页; | ^ 34 | 35 | class About扩展了React.Component {36 | render(){

@ multi main webpack:bundle现在是VALID

答案应该是三个可点击的链接,可用于在应用程序启动时更改路线.

Answer 1

多个组件确实有效,但您需要使用名称导出组件,并且只能导出一个默认组件.

如下面的示例所示,我将App Component 导出为defalut组件,将其他组件Home,About,Contact导出为命名组件.

对于命名组件,您需要使用其名称导入它们:

从'./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'));

不要使用名称组件(Home,About,Contact)导入默认组件(App Component ).如果使用命名组件导入它们,则它们无法正确呈现.

大段引用