Question

我正在将我们的网站重新构建为一个页面React应用程序，但是为了简单起见，我希望保持登录页面不变。登陆页面是一个大型的静态HTML文件（带有一些用于动画，引导程序等的JS）。大量的导入和动画使得难以将整个页面作为React组件进行迁移。

我想将网站添加到/public/landing-page.html下，所有其他CSS / JS / assets都位于同一位置。有没有一种方法可以分配一个路由来服务此页面，而不是使用通常的React方法呈现路由？

这似乎是人们从JS / HTML到React迁移网站的普遍问题。

Answer 1

您可以将此landing-page.html和相应的CSS / JavaScript /资产文件作为静态资源提供。也就是说，使Node.js成为这些文件的普通Web服务器，而无需与React进行任何连接。

例如，如果在Node.js中使用Express框架，则很容易进行配置：

const express = require('express');
const app = express();
...
app.use(express.static(path.join(__dirname, 'public'), { 'extensions': ['html', 'js', 'css', 'png'], 'maxAge': '7d' }));

然后，您可以打开http://<your-website>/landing-page.html，而无需任何React内容。

Answer 2

如果要在react结构中实现此功能而不使用节点服务器，则应尝试使用

<div __dangerouslySetInnerHTML={{__html: yourSiteAsAString }} />

如果您想要一种更安全的方法，请尝试使用sanitize节点模块，该模块会在将HTML传递给__dangerouslySetInnerHTML之前对HTML进行消毒

为React提供大型静态页面

2 个答案: