我的React应用程序忽略了我在尝试导航到它时创建的一个标准html页面

Question

我有一个单页React web应用程序前端，它首先加载index.js文件。

它使用后端的实体框架核心控制器来加载/保存数据。

index.js文件加载另一个名为Header.js 的组件

它看起来像这样：

import React from "react";
import ReactDOM from "react-dom";
import Header from "./Header/Header";
ReactDOM.render(
<React.Fragment>
<Header />
</React.Fragment>,
document.getElementById('root')
)

当我加载站点时，https://xmywebportalx.games.ca/，它会自动转到index.js，然后加载Header组件。

该应用程序运行良好，但我想从异地网页添加一个链接。

我希望链接https://xmywebportalx.games.ca/tryForFree.html

tryForFree.html与主React应用程序分离，只是通过后端实体框架核心向数据库添加一个条目。

所以我创建了一个tryForFree.html页面进行测试，但每次我尝试通过链接访问时，https://xmywebportalx.games.ca/tryForFree.html，它似乎被忽略了，因为应用程序总是先转到index.js，然后转到Header组件。

如何让react应用程序加载我的https://xmywebportalx.games.ca/tryForFree.html当它被浏览器点击时链接？

谢谢！

Answer 1

在我看来，您可以通过在页面加载时读取URL并手动重定向到HTML页面(如果路径为"/tryForFree.html"(来解决这个问题。

具体来说，在具有空依赖数组的UseEffect挂钩内(因此它仅在初始页面加载时运行(，您可以使用window.location.pathname检查URL的路径名，如果它等于"/tryForFree.html"，则加载html页面。