私のアプリケーションのすべてのページが完全にレンダリングされます。ブラウザで定義されていない反応コンポーネント - ES6のインポート/エクスポート
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ファイルで