我的应用中所有页面都可以完美渲染。我刚刚添加了一个名为Lightning的页面,它看起来像这样:
当我在浏览器中查看“.../lightningCounter”时,什么也没有显示。从React开发者控制台中,我可以看到Route的组件属性为未定义。如果我将组件更改为另一个(例如Home),则会显示出来。如果我将LightingPage组件移动到src /根目录中并修改导入({ LightningPage } => LightningPage),它也能正常工作。我在这里做错了什么?
我使用了create-react-app和其中包含的npm脚本。生产构建与开发不同。
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脚本。生产构建与开发不同。