React.js页面导入组件失败：Module not found错误求助

报错信息 #

ERROR in ./src/pages/Home.jsx 4:0-37
Module not found: Error: Can't resolve './components/Card' in '/home/c4p1/blog/src/pages'

问题核心 #

Home.jsx位于src/pages目录，而Card、Header组件在同级的src/components目录下。当前导入路径./components/Card是在pages文件夹内部查找components，自然找不到目标文件——相对路径错误是直接原因。

解决方法 #

1. 修正导入路径 #

将Home.jsx中的导入语句修改为：

import Card from '../components/Card';
import Header from '../components/Header';

../表示回到上一级目录（即src目录），再定位到components文件夹下的组件，这是符合项目结构的正确路径。

2. 额外验证项 #

• 确认components文件夹下存在Card.jsx（或Card.js）、Header.jsx（或Header.js）文件，文件名需和导入时完全一致（区分大小写）。
• 确认组件文件使用了默认导出：比如Card.jsx中要有export default function Card() {...}这类代码，确保能通过import Card from...正确导入。

修正后代码示例 #

Home.jsx #

import Card from '../components/Card';
import Header from '../components/Header';

const sections = [
    { title: 'Blog', url: '#' },
    { title: 'About', url: '#' },
    { title: 'Portifolio', url: '#' },
];

export default function Home() {
    return (
        <>
            <Header title="C4p1" sections={sections}></Header>
            <Card/>
            <Card/>
        </>
    );
}

补充：路由写法修正（React Router v6+） #

你的routes.js使用了旧版Route的component属性，React Router v6+已改用element属性，建议同步修正避免后续问题：

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from './pages/Home'

function Rotas(){
   return(
       <BrowserRouter>
           <Routes>
               <Route path="/" element={<Home />} />
           </Routes>
       </BrowserRouter>
   );
}

export default Rotas;

内容的提问来源于stack exchange，提问作者Léo Igor Nunes de Oliveira