Home ne contient pas une exportation nommée Home

Je travaillais avec create-react-app et je suis tombé sur ce problème où je reçois Home does not contain an export named Home .

Voici comment je configure mon fichier 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 ( 
Hello
) } } export default App;

Maintenant, dans mon dossier de layouts en layouts , j’ai le fichier Home.js qui est configuré comme suit.

 import React, { Component } from 'react'; class Home extends Component{ render(){ return( 

Hello Man

) } } export default Home;

Comme vous pouvez le voir, j’exporte le composant Home , mais j’obtiens une erreur dans cette console.

entrer la description de l'image ici

Que se passe-t-il?

L’erreur vous indique que vous importez de manière incorrecte. Le code que vous avez maintenant:

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

Est incorrect car vous exportez en tant qu’exportation par défaut, pas en tant qu’exportation nommée. Vérifiez cette ligne:

 export default Home; 

Vous exportez par défaut , pas comme un nom. Ainsi, importez Home comme ceci:

 import Home from './layouts/Home'; 

Notez qu’il n’y a pas d’accolades. Lectures complémentaires sur l’ import et l’ export .

Utilisation

 import Home from './layouts/Home' 

plutôt que

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

Supprimer {} de la page d’accueil