Question

我从网站建设者那里下载了一个漂亮的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} />
    );
  }
}```

Answer 1

通过使用http-proxy-middleware将特定路径直接代理到服务器来解决此问题。有关更多信息，请参见React文档中标题为Configuring the proxy manually的部分。

安装http-proxy-middleware。如下所示在React客户端应用中创建文件src/setupProxy.js：

const proxy = require('http-proxy-middleware');

// Matches landing page at / alone
var landingPageFilter = function (pathname, req) {
    console.log(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-generator创建的服务器使用Express。如下所示在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的情况下提供的下载页面

如何在React + Express中直接从服务器提供静态html文件？

1 个答案: