reactjs - 在公共(public)文件夹内 react : Accessing a page outside React app,

Question

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

我需要在一个普通的 html 站点上测试一些广告内容，没有额外的 React 代码。我的问题是 ads.txt标签需要被 Google 抓取，这在新页面/URL 上最多可能需要 24 小时，而我实际上没有时间。

所以我做了以下事情。在我的 repo 下 /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 代码中犯了错误。

我们不认为我们犯了任何错误(广告在我们的测试环境中显示良好，但在生产环境中没有显示)，我们必须证明 React 不是广告未显示的罪魁祸首。

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

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

Answer 1

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

这意味着运行后npm run build你会有一个 构建 该文件夹中只有一个名为 index.html 的 html 文件。

这个 index.html 不知道也和你添加的'没有关系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

构建阶段包括公共(public)文件夹:

如果你在 public 文件夹中有一张图片，并且这张图片被导入到其他组件中，它会在你运行 后显示出来。 npm 运行构建

希望能帮助到你。