简体繁体 English

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

[英]ReactJS link to local HTML file from different folder/project

原文 2021-02-08 19:51:54 8 1 html/ reactjs/ webpack-html-loader

I'm using ReactJS to build a site, and I want to create a link (a href="relativepath") to a local HTML file so that when the user clicks on the link, it'll open up the html page.我正在使用 ReactJS 来构建一个站点，并且我想创建一个指向本地 HTML 文件的链接（a href="relativepath"），以便当用户单击该链接时，它将打开 ZFC35FDC70D5FC69D23EZ8 页面。 The local file is in a different folder X outside of the project, and I don't want to upload it into my src folder because the html file depends on a lot of other files in X. Is there a good way to do so?本地文件位于项目外部的不同文件夹 X 中，我不想将其上传到我的 src 文件夹中，因为 html 文件依赖于 X 中的许多其他文件。有没有好的方法呢？

I also want to upload a different local HTML file that is already within the src folder of my React App.我还想上传一个不同的本地 HTML 文件，该文件已经在我的 React 应用程序的 src 文件夹中。 I currently have something like this: import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)}我目前有这样的事情： import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)} import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)} and it says in my terminal that import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)}它在我的终端上说

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。 See https://webpack.js.org/concepts#loaders > <html>| | <head>请参阅https://webpack.js.org/concepts#loaders > <html>| | <head> > <html>| | <head> > <html>| | <head> > > <html>| | <head> >

I already tried adding in webpack + an htmlLoader, but I think I followed the steps incorrectly as I wasn't able to get it to work.我已经尝试添加 webpack + 一个 htmlLoader，但我认为我错误地执行了这些步骤，因为我无法让它工作。 I uninstalled those packages, so I'm now back to square one.我卸载了这些软件包，所以我现在回到第一方。 Thank you so much!太感谢了！

1 个解决方案

Just linking to or importing from a local file in some other location won't work unless those local files are also deployed to the server in the same location relative to the app (and the web server has access to that location).除非这些本地文件也部署到与应用程序相关的相同位置的服务器（并且 web 服务器可以访问该位置），否则仅链接到其他位置的本地文件或从其导入将不起作用。

So you'll need to copy the file and its linked dependencies in a folder that will be deployed along with your react build, but not where it'll get treated as part of the react codebase so webpack will try to compile it (so not in src either).因此，您需要将文件及其链接的依赖项复制到一个文件夹中，该文件夹将与您的 react 构建一起部署，但不是将其视为 react 代码库的一部分，因此 webpack 将尝试编译它（所以不是在src中）。

If you used create-react-app to set up your application, for example, this would be the public folder ;例如，如果您使用create-react-app来设置您的应用程序，这将是public文件夹； other webpack setups may use different names but the general concept is the same.其他 webpack 设置可能使用不同的名称，但一般概念是相同的。