在 react.js 中导出多个模块

Js 的新用户，并尝试遵循教程。遗憾的是页面中给出的代码不起作用。 webpack 抱怨道

ERROR in ./App.jsx
Module build failed: SyntaxError: Only one default export allowed per module.

不知道怎么修，谢谢。

= = = App.jsx = = = =

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 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;


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


export default Home;


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


export default About;


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


export default Contact;

= = main.js = = =

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';


ReactDOM.render(<App/>, document.getElementById('app'));

更新1

我注释掉了所有的 export default，并在最后添加了以下内容

module.exports = {
App: App,
Home: Home,
About: About,
Contact: Contact
}

现在没有编译错误，但网页是一个空白。我不知道这里出了什么问题。

206067

小开

最佳答案

You can have only one default export which you declare like:

export default App; or export default class App extends React.Component {...

and later do import App from './App'

If you want to export something more you can use named exports which you declare without default keyword like:

export {
About,
Contact,
}

or:

export About;
export Contact;

or:

export const About = class About extends React.Component {....
export const Contact = () => (<div> ... </div>);

and later you import them like:

import App, { About, Contact } from './App';

EDIT:

There is a mistake in the tutorial as it is not possible to make 3 default exports in the same main.js file. Other than that why export anything if it is no used outside the file?. Correct main.js :

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


class App extends React.Component {
...
}


class Home extends React.Component {
...
}




class About extends React.Component {
...
}




class Contact extends React.Component {
...
}




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


), document.getElementById('app'))

EDIT2:

another thing is that this tutorial is based on react-router-V3 which has different api than v4.