Домашняя страница не содержит экспорт с именем Home

Я работал с приложением 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 но я получаю сообщение об ошибке в моей консоли.

Что здесь происходит?

Ответ 1

Ошибка сообщает вам, что вы импортируете неправильно. Код, который у вас есть сейчас:

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

Неверно, потому что вы экспортируете как экспорт по умолчанию, а не как именованный экспорт. Проверьте эту строку:

export default Home;

Вы экспортируете по умолчанию, а не как имя. Таким образом, импортируйте Home следующим образом:

import Home from './layouts/Home';

Обратите внимание, что нет фигурных скобок. Дальнейшее чтение по import и export.

Ответ 2

использование

import Home from './layouts/Home'

скорее, чем

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

Удалить {} из дома

Ответ 3

Это случай, когда вы смешивали экспорт по умолчанию и называли экспорт.

Когда имеешь дело с named экспорта, если вы пытаетесь импортировать их, вы должны использовать фигурные скобки, как показано ниже,

import { Home } from './layouts/Home'; // if the Home is a named export

В вашем случае Home был экспортирован как стандартный. Это тот, который будет импортироваться из модуля, когда вы не укажете определенное имя определенного фрагмента кода. Когда вы импортируете и опускаете фигурные скобки, он будет искать экспорт по умолчанию в импортируемом модуле. Таким образом, ваш импорт должен быть,

import Home from './layouts/Home'; // if the Home is a default export

Некоторые ссылки на внешний вид:

Ответ 4

Вы можете использовать два способа решения этой проблемы, во-первых, я считаю, что лучшим способом является замена импортируемого сегмента кода на следующий:

import Home from './layouts/Home'

или экспортируйте ваш компонент без значения по умолчанию, которое называется именованным экспортом

import React, { Component } from 'react';

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

export {Home};

Ответ 5

Я только что столкнулся с этим сообщением об ошибке (после обновления до nextjs 9 некоторые переносимые импорты начали выдавать эту ошибку). Мне удалось исправить их, используя следующий синтаксис:

import * as Home from './layouts/Home';

Ответ 6

Вы оставляете место в своем

<Home />

тег. удалить пространство и пусть будет

<Home/>

Очевидно, что React не нравится это, если вы не передаете реквизиты в компоненте.