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

Question

我的应用中所有页面都可以完美渲染。我刚刚添加了一个名为Lightning的页面，它看起来像这样：

import React from 'react'

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

export default LightningPage;

接下来我有一个index.js文件，它包含以下内容：

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

然后我像这样将它导入到我的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;

为了清晰起见，我的文件夹结构如下：

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

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

我使用了create-react-app和其中包含的npm脚本。生产构建与开发不同。

- DAnsermino

Answer 1

在 index.js 文件中：

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

应该是：

应该是：

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

- Tristan Hessell