Как обслуживать статический html-файл непосредственно с сервера в React+Express?
Я скачал красивую html-страницу со ссылками на необходимые css и js из конструктора веб-сайтов и хочу использовать ее в качестве целевой страницы. У меня есть полноценное приложение React, и я хочу использовать этот загруженный html-файл в качестве целевой страницы для маршрута /. Как лучше всего это сделать?
Я изучил <div dangerouslySetInnerHTML>, как в приведенном ниже примере, но это приводит к медленной загрузке страницы.
export default class StaticContainer extends Component {
state = {
__html: "" // copy/paste html here
}
render() {
return (
<div dangerouslySetInnerHTML = {this.state} />
);
}
}```
Чем это отличается от примера, который я вставил выше?
Делая это, вы не полагаетесь на dangerouslySetInnerHTML, и люди из React назвали его не зря, может быть, они делают кучу вещей под капотом со значением, которое вы предоставляете, что, вероятно, приводит к медлительности. Вы пытались создать новый компонент и проверить результат?
Нашел обходной путь и опубликовал решение, используя http-middleware-proxy
Ответы 1
Решил это путем проксирования определенных путей непосредственно на сервер с помощью http-proxy-middleware. Дополнительную информацию см. в разделе Настройка прокси вручную документации React.
Установить http-proxy-middleware. Создайте файл src/setupProxy.js в клиентском приложении React следующим образом:
const proxy = require('http-proxy-middleware');
// Matches landing page at / alone
var landingPageFilter = function (pathname, req) {
console.info(pathname);
return pathname.match('^/$') && req.method === 'GET';
};
module.exports = function (app) {
// this is for APIs
app.use(proxy('/api', { target: 'http://localhost:3001/' }));
// this is for the landing page
app.use(proxy(landingPageFilter, { target: 'http://localhost:3001/' }));
};
В моем случае я использовал Express для своего сервера, созданного с использованием express-generator. Обработал эти маршруты в app.js, как показано ниже:
app.use('/api/', indexRouter);
app.use("/", (req, res) => {
res.status(200).sendFile(path.resolve(__dirname, "../public", "landing_page.html"));
});
где landing_page.html — загруженная страница, которую мы хотели обслуживать без React
Обновлено: это работало только в dev. Для производства вам нужно будет создать страницы React и обслуживать их. Следуйте этот учебник, но убедитесь, что у вас правильный путь для создания страниц React. В учебнике это client/build. Может отличаться в зависимости от вашей структуры каталогов.
почему бы вам не конвертировать загруженный html как отдельный компонент? Или это динамический контент, который меняется?