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
- Comment convertir les clés de la carte en tableau?
- Est-ce un bon moyen de cloner un object dans ES6?
- Comment éviter les importations avec des chemins relatifs très longs dans Angular 2?
- Quelles sont les règles et les règles pour les classes ECMAScript 6?
- Comment définir les accessoires par défaut des composants sur le composant React
) } } export default Home;
Comme vous pouvez le voir, j’exporte le composant Home
, mais j’obtiens une erreur dans cette console.
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