Служите большой статической странице из React

Question

Я перестраиваю наш веб-сайт как одностраничное приложение React, но для простоты хотел бы сохранить целевую страницу такой же. Целевая страница - это большой статический HTML-файл (с некоторыми JS для анимации, начальной загрузки и т. Д.). Большой объем импорта и анимаций затрудняет перенос всей страницы в качестве компонента реакции.

Я хочу добавить сайт в /public/landing-page.html со всеми дополнительными активами CSS / JS / в одном месте. Есть ли способ назначить маршрут для обслуживания этой страницы, а не отображать маршрут обычным способом React?

Это похоже на обычную проблему для людей, переводящих свои сайты из JS / HTML в React.

Answer 1

Если вы хотите достичь этого в структуре реагирования без использования сервера узлов, попробуйте использовать

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

, если вы хотите более безопасный подход, попробуйте использовать sanitizeмодуль узла, который очищает HTML перед передачей его на __dangerouslySetInnerHTML

Answer 2

Вы можете использовать этот landing-page.html и соответствующие файлы CSS / JavaScript / Asset в качестве статических ресурсов.То есть, сделайте Node.js простым веб-сервером для этих файлов без какого-либо подключения к 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.