如何使用快速路由器渲染 React 组件？答案

【问题标题】：How to render a React component with a express router?如何使用快速路由器渲染 React 组件？
【发布时间】：2019-06-02 12:49:51
【问题描述】：

所以我开始我的项目是作为一个 React 单页应用程序。但事实证明，拥有一个用于渲染页面的基本后端并拥有真正的路由会更方便。另外，我有一些变量需要从所有页面访问，并且将它们作为所有组件的道具真的很重。因此，将它们与页面一起发送可能是一个解决方案。所以我添加了 Express，现在我可以用它渲染一个基本的 HTML 页面。但我不知道如何将我的反应组件链接到这个 html 文件。或者将所需的变量传递给它。

我使用了 react-router-dom 但它不支持页面刷新。而且它对需要从所有组件访问的全局变量没有帮助。

在我的 index.js 中，您可以看到我是如何渲染我的基本 html 文件的，并且在最后并评论了我的 react 组件在添加 express 之前是如何渲染的。

app.use(express.static('public'));

router.get('/', function(req, res, next) {
    res.sendFile('./public/views/loginView.html' , { root : __dirname});
});

app.use(router);
app.listen('8080');

// const wrapper = document.getElementById("app");
// wrapper ? ReactDOM.render(<App />, wrapper) : false;

这里是我的 loginView.html

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <!-- links and scripts -->
        <title>The login page</title>
    </head>
    <body>
        <div id="app">
            content
        </div>
    </body>
</html>

有没有一种简单的方法可以将我的 html 文件与其反应组件链接并呈现它？如果没有，是否有另一种方法可以使每个反应组件（可能是 react-redux）都可以访问一些变量（不是常量）？

【问题讨论】：

标签： html reactjs express

【解决方案1】：

因此，您希望使用 React 创建可用于生产的捆绑包。这通常涉及拆分捆绑包，因此您不会向用户提供 5+Mb 文件以供下载（例如使用 4G 连接不良会花费太长时间）以及缩小和丑化代码（因此没有人窃取您的代码） .然后，这些捆绑的 javascript 文件将托管在您的服务器上，并在 HTML 文件中引用它们。

然后，快递应用程序将沿着任何路线走，只显示 HTML 文件，例如router.get('*', (req, res) => res.send('index.html)).

我建议使用 webpack 来创建包，因为它有助于拆分和缩小等。看看 webpack 的开发和生产以及 create-react-app 的快速项目设置。

【讨论】：