React动态导入报错：路由传递的路径参数无法识别（硬编码正常）

问题原因 #

你遇到的Invalid call at import statement报错，本质是因为Webpack、Vite这类前端打包工具在编译时需要确定导入路径的静态前缀，完全动态的字符串路径无法被打包工具解析（它没法提前知道要打包哪些文件）。硬编码路径能运行，是因为工具能明确识别到要导入的文件。

方案1：静态前缀+动态后缀 #

如果你的目标文件都在同一个固定目录下（比如../../database/previous_year/），可以让上一屏只传递文件名（比如previous23），然后在当前页面拼接静态前缀和动态文件名：

/* 从上一屏获取文件名 */
const { exam_info } = route.params;

const [data, setData] = useState([]);

useEffect(() => {
  if (exam_info) {
    // 固定路径前缀，动态拼接文件名
    import(`../../database/previous_year/${exam_info}`)
      .then((dataFromDb) => {
        setData(dataFromDb.default);
      });
  }
}, [exam_info])

这种方式下，打包工具会把../../database/previous_year/目录下的所有文件都打包进产物，运行时根据动态文件名加载对应文件。

方案2：创建导入映射表 #

如果文件分布在不同目录，或者不想打包目录下所有文件，可以提前创建一个包含所有可能导入项的映射对象，根据exam_info的值匹配对应的导入函数：

/* 从上一屏获取标识 */
const { exam_info } = route.params;

const [data, setData] = useState([]);

// 预定义所有可能的导入映射
const importMap = {
  previous23: () => import('../../database/previous_year/previous23'),
  previous22: () => import('../../database/previous_year/previous22'),
  sampleExam: () => import('../../database/sample/sample_exam'),
  // 补充其他需要的导入项
};

useEffect(() => {
  if (exam_info && importMap[exam_info]) {
    importMap[exam_info]()
      .then((dataFromDb) => {
        setData(dataFromDb.default);
      });
  }
}, [exam_info])

这种方式更可控，打包工具只会打包映射表中列出的文件，适合文件数量不多的场景。

注意事项 #

• 确保exam_info的值和映射表的key完全匹配（方案2），或者和目标文件名完全一致（方案1）
• 禁止使用完全动态的路径（整个路径都是变量），必须保留静态前缀让打包工具识别

内容的提问来源于stack exchange，提问作者Akash Das