브라우저에서 정의되지 않은 반응 구성 요소 - 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'