在项目文件结构中的导入语句中使用点 (../) 表示什么

Question

在项目文件结构中的导入语句中使用点（./ 和 ../）有什么意义？我发现浏览不同级别目录的概念令人困惑，导致我的导入出现错误。

您能解释一下吗？

Import trace for requested module:
./src/app/components/Header/Navbar.jsx
./src/app/layout.jsx

./src/app/components/Header/Navbar.jsx
Attempted import error: 'Logo' is not exported from '../SVGs/Logo' (imported as 'Logo').

Import trace for requested module:
./src/app/components/Header/Navbar.jsx
./src/app/layout.jsx
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

这个点在项目文件结构中起什么作用以及如何理解它？

import Button from "../Button/Button";
import { Logo } from "../SVGs/Logo";
import { LogoSimple } from "../SVGs/LogoSimple";

import Link from "next/link";
export default function Navbar() {
  return (
    <header className=" border-b-2 border-b-dim-gray border-opacity-30">
      <nav className="px-0 sm:px-6 pt-1 pb-2 xl:pb-4 2xl:pb-6 border-gray border-opacity-20 mt-4 xl:mt-8 2xl:mt-10  flex items-center justify-between">
        <Link aria-label="Back to Home" href="/">
          <LogoSimple />
          <Logo />
        </Link>
        <div className="flex items-center gap-x-8">
          <Link
            className="font-medium hidden sm:block relative overflow-hidden group h-fit text-base xl:text-h6 2xl:text-h5"
            href="/about"
          >
            <span className="flex group-hover:-translate-y-5 group-hover:opacity-0 transition-all ease-in-out-circ duration-500">
              About
            </span>
            <span className="absolute inset-0 group-hover:translate-y-0 translate-y-5 xl:translate-y-8 transition-all ease-in-out-circ duration-500 underline">
              About
            </span>
          </Link>
          <Button target="_blank" href="https://forms.gle/PftXkai3sNZquWu68">
            Add a Resource
          </Button>
        </div>
      </nav>
    </header>
  );
}

Answer 1

在许多（大多数）操作系统中，这些是对当前文件夹和父文件夹的相对引用：

• ./

  是对当前目录的引用，即

  ./test.py

  将引用您当前所在目录中名为

  test.py

  的文件

• ../

  是对父目录的引用，即

  ../test,py

  将引用父文件夹中的文件名

  test.py

  或当前目录下的一个文件夹