找不到模块：无法解析“./pages”编译失败

Posted 2023-02-22

【中文标题】找不到模块：无法解析“./pages”编译失败

【英文标题】：Module not found: Can't resolve './pages' Failed to compile

【发布时间】：2020-10-30 05:36:22

【问题描述】：

您好，我正在导入存储在 pages 文件夹中的 home 组件。将其添加到我的应用程序的路由器中

得到下面的错误 ./src/App.js 模块未找到：无法解析“./pages”

但是我好像做对了？Module not found: Can't resolve './pages'

请帮助我为什么找不到它的说模块

App.JS 代码

import React from 'react';
import  BrowserRouter as Router, Switch  from 'react-router-dom';
import  Route  from 'react-router-dom';
import Home from "./pages";

function App() 
  return (
    <Router>
      <Switch>
        <Route path="/browse">
          <p>I will be the sign in page</p>
        </Route>
        <Route path="/signin">
          <p>I will be the sign up page</p>
        </Route>
        <Route path="/browse">
          <p>I will be the browse page</p>
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );


export default App;

home.js 代码

import React from 'react';

export default function Home() 
    return (
        <h1>Hello Sambulo</h1>      
    )

【问题讨论】：

你能分享你的项目文件夹结构吗？

【参考方案1】：

根据 React 组件命名约定，最好使用 Home.js 作为文件名。 所以这个也有效。

import Home from "./pages/Home";

组件名称应为 PascalCase。

例如，MyComponent、MyChildComponent 等

【参考方案2】：

当您从'./pages' 导入时，默认行为是在./pages 文件夹中查找名为index.js 的文件。

如果你想导入home.js，你必须将导入更改为

import Home from "./pages/home.js";

末尾的.js 是可选的，因为.js 是导入的默认文件扩展名

【讨论】：

你能截图给我们看看你的项目目录吗？