Question

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

我使用了react-router-dom，但是它不支持页面刷新。而且，需要从所有组件访问全局变量也无济于事。

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

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组件链接起来并进行渲染？如果不是，是否有其他方法可以使每个React组件（也许是react-redux）可以访问某些变量（不是常量）？

Answer 1

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

然后，快速应用会沿着任何路线沿线行驶，仅显示HTML文件，例如router.get('*', (req, res) => res.send('index.html))。

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

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

1 个答案: