ブラウザで定義されていない反応コンポーネント - ES6のインポート/エクスポート

Question

私のアプリケーションのすべてのページが完全にレンダリングされます。

export { deafult as LightningPage } from './LightningPage.js' 

私はその後、私のアプリケーションにインポート：

import React from 'react' 

class LightningPage extends React.Component{ 
    render(){ 
    return(<h1>Hello!</h1>) 
    } 
} 

export default LightningPage; 

は、私は、次があるindex.jsファイルを持っている：私はこのようになります雷ページと呼ばれる別のページを追加しましたそのようなの.js：

import React, { Component } from 'react'; 
import './App.css'; 
import { Header } from './header' 
import { Route, Switch } from 'react-router' 
... Import other page components ... 
import { LightningPage } from './lightning' 

const contentDivStyle = { 
    padding: "1rem" 
} 


class App extends Component { 
    render() { 
    return (
     <div> 
     <Header /> 
     <div id='content' style={contentDivStyle}> 
      <Switch> 
      <Route exact path="/lightningCounter" component={LightningPage} /> 
      <Route exact path="/" component={Home} /> 
      ... Other routes ... 
      </Switch> 
     </div> 
     <Footer /> 
     </div> 
    ) 
    } 
} 

export default App; 

明確にするために、私のフォルダ構造は次のとおりです。

/src 
--/lightning 
----index.js 
----LightningPage.js 
    ... Other Component folders ... 
--App.js 

ブラウザで「.../lightningCounter」を表示すると何も表示されず、反応開発者コンソールからRouteのコンポーネントのpropが未定義であることがわかります。コンポーネントを別のコンポーネント（ホームなど）に変更すると、そのコンポーネントが表示されます。 LightingPageコンポーネントをsrc/rootに移動してインポート（{LightningPage} => LightningPage）を変更すると、それはうまく動作します。私はここで間違って何をしていますか？

私はcreate-react-appスクリプトとインクルードされたnpmスクリプトを使用しました。プロダクションビルドは開発と異なるものではありません。 index.jsファイルで

Answer 1

：

export { deafult as LightningPage } from './LightningPage.js' 

は次のようになります。

export { default as LightningPage } from './LightningPage.js'