React：在公共文件夹内访问 React 应用程序外部的页面

Question

我有一个由create-react-app 创建的 React 应用程序。该应用程序运行良好，但我遇到了问题

我需要在纯 html 网站上测试 som 广告内容，无需额外的 React 代码。我遇到的问题是ads.txt 标签需要被 Google 抓取，这在新页面/URL 上可能需要长达 24 小时，而我真的没有时间。

所以我做了以下。在/public 文件夹下的仓库中，我添加了一个文件夹/ad-test，里面有一个index.html。当我使用npm start 在本地提供它并转到http://localhost:3000/ad-test 时，它工作正常。

太好了，我考虑并将其部署到生产环境，但现在当我尝试转到 http://[my-site]/ad-test 或 http://[my-site]/yo-test/index.html 时它不起作用（我得到了我创建的 React 404 站点）。

我查看了here，如果我理解正确，则不可能按照我尝试的方式进行操作，因为构建阶段不会包含公用文件夹。我说的对吗？

知道如何解决这个问题吗？

编辑：

总的来说，我对 React 和 React Router 有很好的了解，该应用程序已经使用 <Switch><Route ... /></Switch> 以及指向 Not Found Component 和底部的包罗万象的路由。

我遇到的问题是我们包含了来自广告提供商的一些广告脚本。广告没有显示在应用程序中（从浏览器中完全删除广告拦截器等），并且提供商认为我们在 React 代码中犯了错误。

我们认为我们没有犯任何错误（广告在我们的测试环境中显示正常，但在 prod 中却没有），我们必须证明 React 不是广告未显示的罪魁祸首。

为此，我们创建了一个静态 HTML 文件，其中包含所有硬编码的广告，没有 React 组件或其他可能干扰的东西。但是，由于广告和谷歌爬虫和 ads.txt，我们需要在与我们的主页/应用程序相同的域下拥有静态测试页面。

这就是为什么我问是否有可能以某种方式添加一个可以从http://my.page/test-page.html 访问而不会被 React 路由器“拦截”的静态 HTML，即它存在于 React 之外但在同一台服务器上。

Answer 1

当您通过 create-react-app 使用 react 时，这意味着您正在构建一个单页应用程序。

这意味着在运行 npm run build 之后，您将拥有一个 build 文件夹，其中只有一个名为 index.html 的 html 文件。

此 index.html 不知道，与您在 ad-test 文件夹中添加的“index.html”无关。

如果你想让你的 ad-test html 被 react 识别，你需要让它成为 app.js 的一个组件，并使用 react-router 给它一个路径名。

很简单。

首先，安装react-router-dom；

二、设置react-router-dom；参考https://reacttraining.com/react-router/web/guides/quick-start

第三，给你的add-test组件一个路径名。你的js代码应该是这样的：

<Route path='/ad-test' component={AdTest} />

重要提示：

部署应用后，请始终记住您刚刚构建了一个单页应用。

您的应用中只有 一个 html。

请确保在部署后测试您的应用程序时，您必须告诉您的服务提供商，无论用户在地址栏中输入什么路径名，您始终将其重定向到 index.html

构建阶段包括公用文件夹：

如果公用文件夹中有图片，并且该图片已导入其他组件，则在运行 npm run build

后会显示

希望对你有帮助。