ReactJS 链接到来自不同文件夹/项目的本地 HTML 文件答案

【问题标题】：ReactJS link to local HTML file from different folder/projectReactJS 链接到来自不同文件夹/项目的本地 HTML 文件
【发布时间】：2021-02-08 19:51:54
【问题描述】：

我正在使用 ReactJS 构建一个站点，并且我想创建一个指向本地 HTML 文件的链接（a href="relativepath"），以便当用户单击该链接时，它会打开 html页。本地文件在项目外的不同文件夹 X 中，我不想将其上传到我的 src 文件夹中，因为 html 文件依赖于 X 中的许多其他文件。有没有好的方法呢？

我还想上传一个不同的本地 HTML 文件，该文件已经在我的 React 应用程序的 src 文件夹中。我目前有这样的事情： import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)} 它在我的终端上说

您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders > <html>| | <head> >

我已经尝试添加 webpack + 一个 htmlLoader，但我认为我错误地执行了这些步骤，因为我无法让它工作。我卸载了这些软件包，所以我现在回到第一方。非常感谢！

【问题讨论】：

标签： html reactjs webpack-html-loader

【解决方案1】：

仅链接到其他位置的本地文件或从其他位置导入本地文件是行不通的，除非这些本地文件也部署到与应用相关的同一位置的服务器（并且网络服务器有权访问该位置）。

因此，您需要将文件及其链接的依赖项复制到一个文件夹中，该文件夹将与您的 react 构建一起部署，但不会被视为 react 代码库的一部分，因此 webpack 将尝试编译它（所以不在src 中）。

如果您使用create-react-app 来设置您的应用程序，例如，这将是the public folder；其他 webpack 设置可能使用不同的名称，但一般概念是相同的。

【讨论】：