3

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

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

如果有帮助，我的基本服务器端渲染方法就在这里。

所以正如我所说，是否可以使用 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);
});

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

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

4

1 回答 1

3

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

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

仅用几段代码来解释似乎非常复杂，因此请查看我为此目的创建的这个模板。这里还有一个关于这个主题的教程。

于 2015-05-03T18:39:07.953 回答