Question

我的应用中的所有页面都呈现完美。我刚刚添加了另一个名为Lightning页面的页面，如下所示：

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'时，我什么都没看到，从反应开发者控制台我可以看到Route的组件道具未定义。如果我将组件更改为另一个组件（例如Home），则会显示。如果我将我的LightingPage组件移动到src / root并修改导入（{LightningPage} =＆gt; LightningPage），它也可以工作。我在这里做错了什么？

我使用了create-react-app和包含的npm脚本。生产构建与开发没有区别。

Answer 1

在index.js文件中：

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

应该是：

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

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

1 个答案: