为树项目初始化反应组件时出现问题

Question

在为我的新网站项目编写文件结构时，我遇到了一个意想不到的 React 问题。

我刚刚创建了树结构，但文件名错误，我删除了“header”文件夹以及“Header.jsx”和“header.css”。

我重新创建了两个主文件和头文件，但收到此错误：

编译有问题：X

ERROR in ./src/App.jsx 7:0-48
Module not found: Error: Cannot find file: 'Header.jsx' does not match the corresponding name on disk: '.\src\components\header\Header'.

这是我的 App.js 文件：

import React from 'react'
import './index.css'

// import Nav from './components/nav/Nav'
import Header from './components/header/Header'
import Home from './components/home/Home'
import About from './components/about/About'
import Services from './components/services/Services'
import Prices from './components/prices/Prices'
import Contact from './components/contact/Contact'
import Footer from './components/footer/Footer'

const App = () => {
  return (
    <> 
        {/* <Nav /> */}
        <Header />
        <Home />
        <About />
        <Services />
        <Prices />
        <Services />
        <Contact />
        <Footer />
    </>
  )
}

export default App

我似乎无法修复该错误，即使每次删除文件夹或更改框架中的组件名称时，即使关闭 vscode 并重新启动 npm 也会出现相同的错误。

如何解决这个问题？

感谢您的帮助

Answer 1

您不能使用 Header 作为函数名称。除此之外，更改为另一个名称，例如导航栏或其他名称。会起作用的