即使路径看起来正确，React 也找不到我的模块

Question

我目前正在学习 React，我遇到了一个问题，当我启动我的应用程序时，它说它无法在我提供的位置找到模块。我相信我已经写了正确的路径，但情况似乎并非如此。我环顾四周并尝试了所有找到的不同选项，但到目前为止它们还没有起作用。 有什么我没有得到的吗？

我尝试更改编写路径的方式来查找我需要的文件和元素，但无济于事。

• ./

• ../

• src/components/

我总是遇到同样的错误...

Answer 1

每当您想从不同文件导入某些组件时，请参阅以下您需要记住的事情。

1. 如果文件存在于同一文件夹中，您可以简单地执行以下操作 “./file”，其中“./”表示将从中选取文件 相同位置。

2. 如果文件存在于当前文件夹之外的一层。 “../file”，其中“../”代表我们要进入一个级别之外 当前文件夹，请记住 点或点之间不存在空格 斜杠“../”。

3. 如果您必须从当前文件夹内的文件访问某些组件 位置，我们只需给出文件夹名称示例，“./FolderLevel1/file”。

   就您的情况而言，我们将使用“../../components/banner/Banner”，因为我们 必须上升两级，然后必须导入一些组件。

请记住，路径点或斜线之间不能有空格。

Answer 2

像这样导入。

import Banner from "../../components/banner/Banner"

Answer 3

HomePage

是文件

/src/pages/home/Home.jsx

，除非您设置了绝对路径，否则导入将relative 到此位置。例如，要从

/src/components

目录导入组件，您首先需要向后/向上“移动”两个路径段，例如

"../.."

到

/src

，然后进入组件目录，例如

"../../components"

。要导入

Banner

组件，请使用

import Banner from '../../components/banner/Banner';

。要导入

Card

组件，请使用

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

。等等。

import './home.scss';
import Banner from '../../components/banner/Banner';
import Card from '../../components/card/Card';
import imgBannerHome from '../../assets/banner-falaise.png';
import logement from '../../data/logements.json';

export function HomePage() {
  ...
}

如果您希望避免在任何地方使用 relative 导入路径，您可以将项目配置为使用 absolute 路径。在根项目目录中创建一个包含以下条目的

jsconfig.json

文件：

/jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

VS Code 应自动导入此配置并允许使用来自

src

目录的绝对导入。

示例：

import './home.scss';
import Banner from 'components/banner/Banner';
import Card from 'components/card/Card';
import imgBannerHome from 'assets/banner-falaise.png';
import logement from 'data/logements.json';

export function HomePage() {
  ...
}