Ana Sayfa, Ana adlı bir dışa aktarma içermiyor

Çalışıyordum create-react-appve bu konuyla karşılaştığım yerde karşılaştım Home does not contain an export named Home.

Dosyamı şu şekilde oluşturuyorum 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;

Şimdi layoutsklasörümde Home.jsdosya var. aşağıdaki gibi bir kurulum.

import React, { Component } from 'react';

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

export default Home;

Gördüğünüz gibi Homebileşeni dışa aktarıyorum ancak konsolumda bunu söyleyen bir hata alıyorum.

Ne oluyor?

Hata, size yanlış bir şekilde içe aktarma yaptığınızı söylüyor. Şimdi sahip olduğunuz kod:

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

Hatalı, çünkü adlandırılmış bir dışa aktarma olarak değil, varsayılan dışa aktarma olarak dışa aktarıyorsunuz. Bu satırı kontrol edin:

export default Home;

Bir ad olarak değil, varsayılan olarak dışa aktarıyorsunuz . Bu nedenle, şu şekilde içe aktarın Home:

import Home from './layouts/Home';

Küme parantezlerinin olmadığına dikkat edin. Üzerinde fazla okuma importve export.

kullanım

import Home from './layouts/Home'

ziyade

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

{}Ana Sayfadan Kaldır

Bu, varsayılan dışa aktarmalarla adlandırılmış dışa aktarmaları karıştırdığınız bir durumdur .

Dışa namedaktarımlarla uğraşırken , bunları içe aktarmaya çalışırsanız aşağıdaki gibi küme parantezi kullanmalısınız,

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

Sizin durumunuzda, Ana Sayfa varsayılan olarak dışa aktarıldı. Bu, belirli bir kod parçasının belirli bir adını belirtmediğinizde modülden alınacak olanıdır. Küme parantezlerini içe aktardığınızda ve atladığınızda, içe aktardığınız modülde varsayılan dışa aktarmayı arayacaktır. Yani ithalatınız,

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

Bakılacak bazı referanslar:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
• https://medium.com/@trekinbami/a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0

Bu hata mesajıyla karşılaştım (nextjs 9'a yükselttikten sonra bazı aktarılmış içe aktarmalar bu hatayı vermeye başladı). Bunları şu sözdizimini kullanarak düzeltmeyi başardım:

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

Ayrıca kullanabiliriz

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

ihracat anahtar sözcüğünü sınıf anahtar sözcüğünden önce kullanma.

export class Home extends React.Component{
    render(){
        ........
    }
}

Varsayılan olarak

 import Home from './layouts/Home'; 

Varsayılan ihracat sınıfı

 export default class Home extends React.Component{
    render(){
        ........
    }
 }

Her iki durumda da yazmaya gerek yok

export default Home;

dersten sonra.

Bu sorunu çözmek için iki yol kullanabilirsiniz; bence en iyi yol, kodunuzun içe aktarım bölümünü aşağıdaki bir bölümle değiştirmektir:

import Home from './layouts/Home'

veya bileşeninizi varsayılan olmadan dışa aktarın, buna adlandırılmış dışa aktarma adı verilir

import React, { Component } from 'react';

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

export {Home};

Çözüm şudur:

• Home.js dosyanıza gidin
• Dosyanızı dosyanın sonunda şu şekilde dışa aktardığınızdan emin olun:

export default Home;