如何使用Express和React作为UI构建器在后端处理路由

Question

我开始学习ReactJS在我的网站前端使用。我想建立一个多页面的网站，但我遇到了一个问题，我不知道如何实现这一点。

当我使用Express和纯html和css时，方法很简单，我可以很好地处理路由。为了清楚起见，请考虑以下代码：

const express = require('express');
const app = express();
app.get('/home', (req, res)=>{
    //more stuff...
    res.send('home.html');
})

然而，在react与Express混合在一起作为后端，我没有任何想法来处理路由。我遵循了一些教程，但几乎所有的教程都使用react-router作为处理路由的方法。我知道使用react-router可以做到这一点，但我正在寻找一种方法来处理它们，就像上面的代码片段和下面的内容一样：

//initializations
app.get('/home', (req, res)=>{ 
    res.send(<Home and props/>)
})
app.get('/dashboard, (req, res)=>{
    res.send(<Dashboard info=`${req.userInfo} />`)
})

因为正如我所说的，我要用server-side-rendering创建一个多页面的网站，所以我在这种方式上比使用react-router更舒服。

我如何实现这种方法？提前谢谢。

Answer 1

如果你正在使用React，我建议你考虑使用单页面应用。React就是为此而生的，单页应用程序非常棒。

如果您真的希望每个React组件都有一个单独的页面，那么每个页面都需要是它自己的html文档，您可以使用renderToString将组件转换为可以插入到html中的字符串。

这里有一篇关于如何做这件事的好文章，我希望你不要做:-) https://medium.com/front-end-hacking/server-side-rendering-with-react-and-express-382591bfc77c