У меня есть приложение React + Express, в котором я хотел бы обслуживать несколько статических веб-сайтов.
Я следил за этой статьей https://medium.com/@justintulk/serving-static-html-into-a-react-component-using-node-express-8cb9fc9194df и мне удалось отобразить веб-сайт вместе с его стилями, но используемый JavaScript не работает.
Файлы успешно отправлены из ExpressРеагировать при запросе, но я думаю, что JavaScript не загружен должным образом (например, анимации не работают, ошибки, такие как некоторые функции, которые рассматриваются как неопределенные).
Весь поток обслуживания статических веб-сайтов выглядит следующим образом: компонент React, который отображает статический веб-сайт, получает html с веб-сайта, а затем выбираются другие ресурсы (css, javascript, images).Изображения и стили загружены должным образом, а файлы javascript - нет, хотя ожидаемые данные javascript, возвращаемые из Express в React, являются ожидаемыми.
Здесь я запрашиваю данные из React, где this.props.path похож на '/dashboard/templates/stylesheets/stylesheet.css':
fetch(`${this.props.path}`)
.then(resp => {
// fetch returns a readable stream, so translate it into stringified HTML
return resp.text();
})
Вот мой маршрут в Express, который выбирает все ресурсы, кроме html со статического веб-сайта:
app.use('/dashboard/templates', express.static('./server/templates'));
Структура в 'сервер / шаблон' выглядит следующим образом:
-stylesheets
-stylesheet.css
-images
-image.png
-javascripts
-file.js
Теги сценария, таблица стилейссылки и изображения таковы:
<script src="javascripts/file.js"></script>
<img src="images/image.png" alt="Navbar" />
<link href="stylesheets/stylesheet.css" rel="stylesheet" media="screen" />
Любая помощь или любая другая идея, реализующая это, будет принята с благодарностью.