Comment importer `... /` dans React?

Question

Je veux structurer mes fichiers. La structure idéale est inférieure à:

├── src 
│   ├── Data 
│   │   ├── AppData.js 
│   │   └── AppsData.js 
│   ├── Components 
│   │   └── Main 
│   │    └── Main.js 
│   ├── Views 
│   │   ├── AppList 
│   │   ├── Footer.js 
│   │   └── Header.js 
│   │ 
... 

Mais le problème est que si j'importer Header.js de main.js, import Header from '.../Views/Header' échoue. Lorsque j'importe l'en-tête de /Components/Main.js avec import Header from '../Views/Header' réussit.

Comment importer les fichiers .../?

Answer 1

Vous êtes confus par tous les points ici ...
./File.js signifie « file.js dans le répertoire courant »
../File.js signifie « file.js un répertoire up »
../../File.js signifie « file.js deux répertoires jusqu'à »

Pour résoudre votre problème, ne suit

// Components/Main/Main.js 
import Header from "../../Views/Header" 

Answer 2

Vous utilisez relative path., Et quand vous faites ../Views/Header.js vous essayez trouver Header.js dans le dossier Components, mais vous devez passer à src dossier, donc il suffit d'ajouter plus .. à votre chemin

import Header from '../../Views/Header'