使用 Express 路由 React Server 端答案

【问题标题】：Using Express for routing React Server side使用 Express 路由 React Server 端
【发布时间】：2015-05-27 08:00:16
【问题描述】：

在使用服务器端渲染的 React 模板而不是 React Router 时，站点是否可以使用 Express 来处理路由？

我希望在我的组件和存储/操作中使用类似于 example 的 Fluxxor。然后我打算使用 Express 路由器来处理页面路由服务器端，并在每个路由上将所需的组件渲染为字符串。在下面这个基本示例中，我的 app.js 是一个使用 Flux 的简单 todo 示例，但在生产中它可能是适合路由页面的顶级组件。例如/products 将是一个产品组件及其子组件。

这是我的基本 server.js 文件

var express = require('express');
var React = require('react');
var App = require('./app');

var app = express();
var port = 4580;

// include my browserify bundle.js
app.use('/public', express.static(__dirname + '/public'));

app.get('/', function(req, res) {
  /* each route will render the particular component to string. */
  var markup = React.renderToString(App());
  res.send(markup);
});

// I will seperate my views out like this
// app.get('/products', product.list);        
// app.get('/users', user.list);        
// app.get('/products:id', product.list);

如果有帮助，我的基本服务器端渲染方法是 here。

正如我所说，是否可以使用 Express 进行路由，因为我发现 React Router 非常复杂，而且在服务器上拥有路由并使用其组件呈现每个页面似乎更容易服务器端。

除了在 Express 而不是 React Router 中处理路由的复杂性之外，我是否在这里失去了其他任何东西？我认为我可以处理这个问题，但是我想确保我没有通过仅使用 Express 来根据不同的路由渲染到字符串来搞乱 React 的服务器端渲染点。

明确一点，我对 React Router 旨在解决的问题没有意见，并且理解我将做一些类似于 React Router 概述中建议的事情，因为从长远来看是有问题的。

// Not React Router API
otherRouter.route('/', function () {
  React.render(<DashboardRoute/>, document.body);
});

otherRouter.route('/inbox', function () {
  React.render(<InboxRoute/>, document.body);
});

otherRouter.route('/calendar', function () {
  React.render(<CalendarRoute/>, document.body);
});

虽然像这样的一级共享 UI 很容易处理，但越深入越复杂。

我基本上假设我可以处理这种复杂性，无论是真是假，我想我会及时发现。

【问题讨论】：

这里要补充一点，将组件渲染到 body 是个坏主意，因为任何改变 body 的东西都会导致重新渲染，除非你处理 shouldComponentUpdate 调用。
那么为什么 react-router 在他们的main example 中附加到 document.body 呢？这是我在这里复制的。我不会在我的应用程序中将组件渲染到正文我将它们渲染到字符串服务器端和主元素客户端

标签： javascript express reactjs serverside-javascript react-router

【解决方案1】：

听起来您正在尝试使您的网站同构——在服务器上呈现静态标记，在客户端上附加事件侦听器。

我在项目中使用的方法是将客户端 JavaScript 嵌入到服务器渲染的字符串中，这样可以传递相同的道具并且客户端不需要重新渲染。

只用几个sn-ps的代码来解释似乎很复杂，所以请查看我为此目的创建的template。还有一个关于这个主题的教程here。

【讨论】：