使用Parcel构建SPA时动态加载子页面却返回index.html的问题求助

大家好，我现在用Parcel + Firebase构建单页应用，碰到了一个棘手的问题：我写了setupDynamicRouting()函数来实现路由跳转，本打算从sections文件夹拉取对应子页面的HTML内容，但每次请求子页面时，返回的都是index.html，根本拿不到目标页面的内容。我猜测这可能是Parcel的默认行为导致的？而且全程没有报错信息，调试起来特别无从下手。有没有大佬遇到过类似的情况，求个解决思路或者方案！

我的核心实现代码 #

路由初始化JavaScript函数

// Main function to initialize navigation and dynamic loading
function setupDynamicRouting() {
  const main = document.getElementById('main-content');

  // Click handler: update hash
  document.querySelectorAll('[data-section]').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const section = link.getAttribute('data-section');
      if (section) {
        window.location.hash = section; // Triggers hashchange
      }
    });
  });

  // Hash change handler: fetch and load section
  async function handleHashChange() {
    const sectionName = window.location.hash.replace(/^#/, '') || 'main-dashboard';
    // 加时间戳避免缓存影响
    const path = `./sections/${sectionName}.html?_=${Date.now()}`;

    try {
      const response = await fetch(path);
      if (!response.ok) throw new Error(`Failed to fetch ${path}`);
      const html = await response.text();
      main.innerHTML = html;
    } catch (err) {
      console.error('[loadSection] Error:', err);
      main.innerHTML = `
        <div class="alert alert-danger" role="alert">
          Could not load section: <strong>${sectionName}</strong>.
        </div>
      `;
    }
  }

  // 初始加载默认页面
  handleHashChange();
  // 监听hash变化触发页面切换
  window.addEventListener('hashchange', handleHashChange);
}

主页面HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Evalu | Dashboard</title>
  <!-- Google Fonts & Icons -->
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  <!-- Compiled CSS -->
  <link rel="stylesheet" href="css/style.css" />
</head>
<body class="bg-light text-dark">
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img src="/public/imgs/evalu-logo.png" alt="Evalu Logo" height="40" />
      </a>
      <div class="d-flex">
        <button class="btn btn-outline-light" type="button">
          <i class="material-icons">account_circle</i> Profile
        </button>
      </div>
    </div>
  </nav>

  <!-- Sidebar and Main Content -->
  <div class="d-flex" style="min-height: 100vh;">
    <!-- Sidebar -->
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;" id="sidebar">
      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none">
        <i class="bi bi-bootstrap-fill me-2" style="font-size: 1.5rem;"></i>
        <span class="fs-4">Sidebar</span>
      </a>
      <hr />
      <ul class="nav nav-pills flex-column mb-auto">
        <!-- Dashboard -->
        <li>
          <a class="nav-link link-body-emphasis" data-bs-toggle="collapse" href="#dashboardMenu" role="button" aria-expanded="false">
            <i class="bi bi-speedometer2 me-2"></i> Dashboard
          </a>
          <div class="collapse ps-4" id="dashboardMenu">
            <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
              <li><a href="#main-dashboard" class="nav-link link-body-emphasis" data-section="main-dashboard">Main Dashboard</a></li>
              <li><a href="#course-dashboard" class="nav-link link-body-emphasis" data-section="course-dashboard">Course Dashboard</a></li>
              <li><a href="#instructor-dashboard" class="nav-link link-body-emphasis" data-section="instructor-dashboard">Instructor Dashboard</a></li>
            </ul>
          </div>
        </li>
        <!-- Courses -->
        <li>
          <a class="nav-link link-body-emphasis" data-bs-toggle="collapse" href="#coursesMenu" role="button" aria-expanded="false">
            <i class="bi bi-journal-bookmark me-2"></i> Courses
          </a>
          <div class="collapse ps-4" id="coursesMenu">
            <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
              <li><a href="#courses" class="nav-link link-body-emphasis" data-section="courses">All Courses</a></li>
              <li><a href="#new-course" class="nav-link link-body-emphasis" data-section="new-course">New Course</a></li>
            </ul>
          </div>
        </li>
        <!-- Instructors -->
        <li>
          <a class="nav-link link-body-emphasis" data-bs-toggle="collapse" href="#instructorsMenu" role="button" aria-expanded="false">
            <i class="bi bi-people me-2"></i> Instructors
          </a>
          <div class="collapse ps-4" id="instructorsMenu">
            <!-- 子菜单内容省略 -->
          </div>
        </li>
      </ul>
    </div>

    <!-- Main Content Area -->
    <main class="flex-shrink-0 p-3 w-100" id="main-content">
      <!-- 内容将通过JavaScript动态加载 -->
    </main>
  </div>

  <script>
    // 初始化路由
    setupDynamicRouting();
  </script>
</body>
</html>

内容来源于stack exchange