Javascript 浏览器中未定义的React组件-ES6导入/导出

我的应用程序中的所有页面都能完美呈现。我刚刚添加了另一个页面，名为Lightning页面，如下所示：

import React from 'react'

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

export default LightningPage;

然后我将其导入我的App.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;

当我在浏览器中查看“…/lightningCounter”时，我什么也看不到，从react开发者控制台中，我可以看到Route的组件属性未定义。如果我将组件更改为另一个组件（例如Home），它将显示。如果我将我的LightingPage组件移动到src/根目录并修改导入（{LightningPage}=>LightningPage），它也可以工作。我做错了什么

我使用了CreateReact应用程序和附带的npm脚本。生产构建与开发没有区别。

在index.js文件中：

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

应该是：

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

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

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