Question

我尝试使用

导入我的SignupLoginForm.jsx文件

import SignupLoginForm from '../container/SignupLoginForm';

到我的Homepage.jsx文件。

SignupLoginForm.jsx位于client/container/SignupLoginForm.jsx。 Homepage.jsx位于client/components/homepage/HomePage.jsx。

我收到此错误：

ERROR in ./client/components/homepage/HomePage.jsx
Module not found: Error: Cannot resolve 'file' or 'directory' ../container/SignupLoginForm in /Users/Proj_V/client/components/homepage
 @ ./client/components/homepage/HomePage.jsx 23:23-62

Answer 1

使用此：

import SignupLoginForm from '../../container/SignupLoginForm';

由于您的container文件夹距Homepage.jsx文件两级，因此您需要使用../两次。

./，../ -

的含义

./表示当前目录，表示保留在当前文件夹中并在此搜索文件。

../表示当前目录/文件的父级，表示转到一级并搜索该文件。

例如假设您在这些路径中有两个文件file1.js和file2.js，您希望从file1导入file2，将您的文件夹结构想象为树数据结构：

案例1。

file1 - ＆gt; a/b/c/file1.js

file2 - ＆gt; a/b/c/file2.js

由于同一文件夹中的文件可以直接导入，如下所示：./file2.js。

案例2。

file1 - ＆gt; a/b/c/file1.js

file2 - ＆gt; a/b/c/d/file2.js

在这种情况下，d内的文件2位于file1的同一级别，您可以像下面这样导入./d/file2.js。

案例3。

file1 - ＆gt; a/b/c/file1.js

file2 - ＆gt; a/b/file2.js

在这种情况下file2出现在file1的父级，因此您需要使用../向前迈出一步，如下所示：../file2.js

案例4。

file1 - ＆gt; a/b/c/file1.js

file2 - ＆gt; a/file2.js

在这种情况下，file2出现在file1的父级父级别，因此您需要使用../两次升级，如下所示：../../file2.js

简单规则：./表示在同一文件夹中搜索，../进行一步操作并搜索。我们也可以使用这样的组合：.././

Answer 2

除了Mayank的回答，我建议你使用＆＃39; babel-root-import＆＃39;插件，它将帮助您导入并要求使用基于路径的路径。

例如：您可以从您的主页访问SignupLoginForm，如下所示：

import SignupLoginForm from '~/container/SignupLoginForm';

有关详细信息，请参阅https://www.npmjs.com/package/babel-root-import

找不到模块：错误：无法解析＆＃39; file＆＃39;或者＆＃39;目录＆＃39;

2 个答案: