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

我的应用程序中的所有页面都完美呈现。我刚添加了名为闪电页的另一页，看起来像这样：反应组件未在浏览器中定义 - ES6导入/导出

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'

我再导入我的应用程序.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的组件支持是未定义的。如果我将组件更改为另一个组件（例如，主页），它会显示。如果我将我的LightingPage组件移动到src/root并修改导入（{LightningPage} => LightningPage），它也可以正常工作。我在这里做错了什么？

我使用了create-react-app和附带的npm脚本。生产版本与开发没有区别。

来源

2017-09-15 DAnsermino

在index.js文件：

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

应该是：

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

来源

2017-09-15 04:19:19

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

回答

相关问题