[解決済み] react.jsで複数のモジュールをエクスポートする

質問

react.jsの初心者で、以下のことをしようとしている。 チュートリアル . 残念ながら、このページに書かれているコードはうまくいきませんでした。

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
}

これでコンパイルエラーは出なくなりましたが、ウェブページは空白です。何が間違っているのかよくわかりません。

どうすればいいですか？

デフォルトのエクスポートは1つだけで、好きなように宣言できます。

export default App; または export default class App extends React.Component {...

を実行し、その後 import App from './App'

さらに何かを書き出したい場合は 名前付き を使わずに宣言する輸出品です。 default のようなキーワードを使用します。

export {
  About,
  Contact,
}

または

export About;
export Contact;

または

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

というようにインポートします。

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

EDITです。

チュートリアルに間違いがあります。 main.js ファイルを作成します。その他、ファイル外で使用されないのであれば、なぜ何かをエクスポートするのですか？正しい 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です。

もう一つは、このチュートリアルは、v4とは異なるAPIを持つreact-router-V3に基づいていることです。