无法解析React.js中的模块（未找到）

Question

我不敢相信我在问一个明显的问题，但在控制台日志中仍然出现错误。

控制台表示无法在目录中找到该模块，但是我至少检查了10次错别字。无论如何，这是组件代码。

我想在根中渲染 Header

import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <Header/>
    );
  }
}

export default App;

这是Header组件

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'

class Header extends Component {
    render() {
        return {
            <div>
             <div id="particles-js"></div>
             <navBar/>
             <Title/>
          </div>
        };
    }
}

ReactDOM.render(<Header/>, document.getElementById('header'));

我至少检查了10次该模块是否在此位置./src/components/header/header（文件夹“ header”包含“
header.js”）。

然而，React仍然抛出此错误：

编译失败

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

NPM测试 说的是同样的话。

Answer 1

我们通常使用的import方式基于相对路径。

.并且..类似于我们用于导航的方法，terminal例如cd ..离开目录并将mv ~/file .a file移至当前目录。

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

您的情况App.js是，在src/目录中，而header.js在中src/components。要import你做import Header from './components/header'。大致翻译成我的当前目录，找到包含头文件的components文件夹。

现在，如果来自header.js，则需要来自的import东西card，则可以执行此操作。import Card from '../containers/card'。这意味着，移出当前目录，查找具有卡文件的文件夹名称容器。

至于import React, { Component } from 'react'，这不符合启动./或../或/因此节点将开始寻找在该模块node_modules，直到以特定的顺序react被发现。要了解更多详细信息，请在此处阅读。