Home不包含名为Home的导出

Question

我正在create-react-app和我一起工作并遇到了这个问题Home does not contain an export named Home.

这是我设置App.js文件的方式:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Home } from './layouts/Home'

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello
        <Home />
      </div>
    )
  }
}

export default App;

现在在我的layouts文件夹中我有Home.js文件.设置如下.

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        <p className="App-intro">
          Hello Man
        </p>
        )
    }
} 

export default Home;

正如您所看到的,我正在导出Home组件,但我在控制台中收到错误,说明了这一点.

到底是怎么回事？

Answer 1

该错误告诉您导入错误.你现在的代码:

import { Home } from './layouts/Home';

是不正确的,因为您要导出为默认导出,而不是导出.检查这一行:

export default Home;

您是默认导出,而不是名称.因此,导入Home如下:

import Home from './layouts/Home';

请注意,没有大括号.进一步阅读import和export.

Answer 2

使用

import Home from './layouts/Home'

而不是

import { Home } from './layouts/Home'

删除{}从首页