反應組件未在瀏覽器中定義 - 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導入/導出

回答

相關問題