使用Express来路由React Server端

时间:2015-03-24 05:02:19

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

使用服务器端呈现的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 Rouuter非常复杂,在服务器上放置路由并在每个页面上呈现其组件似乎更容易服务器端。

除了在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);
});

虽然像这样的一级共享用户界面非常容易处理,但越来越深入会增加复杂性。

我基本上假设我可以处理这种复杂性,不管是否真实,我想我会及时发现。

1 个答案:

答案 0 :(得分:2)

听起来你正试图让你的网站同构 - 在服务器上渲染静态标记,在客户端附加事件监听器。

我用于项目的方法是在服务器呈现的字符串中嵌入客户端javascript,以便传递相同的道具并在客户端上不需要重新呈现。

使用几段代码解释似乎非常复杂,因此请查看我为此目的创建的template。还有关于此主题的教程here