如何使 React-Router 从服务器呈现交互式输出？答案

【问题标题】：How to make React-Router to render an interactive output from the server?如何使 React-Router 从服务器呈现交互式输出？
【发布时间】：2015-07-06 16:32:18
【问题描述】：

我现在正在尝试使用react-router，与express.js。我的最终目标是：

当 URL 访问服务器时，它将使用服务器端呈现来呈现输出。
一旦进入客户端，以后对Link 组件的点击将导致react-router 在客户端上呈现（无需与服务器进行完整的往返）。

到目前为止我得到了什么：

使服务器渲染类似于this。
当我在客户端渲染时，使Link 组件正常工作。

我的问题：

在服务器上渲染后，输出不是交互式的。我的意思是，没有事件处理程序与 DOM 相关联。这是可以理解的。不过，我正在寻找一种混合服务器和客户端渲染的方法。我的意思是，服务器呈现输出，但不知何故它在客户端中进行交互。如果我得到这个，我将能够在客户端上使用Link，这将满足我的需求。

【问题讨论】：

标签： javascript node.js express reactjs react-router

【解决方案1】：

如果您在客户端调用 React.render(component, element)，其中 element 指向包含服务器渲染的 React 标记的 DOM 节点，并且 component 使用与服务器上相同的道具进行实例化（并假设道具/状态一直匹配），React 会透明地将您的静态标记升级为交互式 React 应用程序。

请参阅演示此技术的 this JSFiddle example：http://jsfiddle.net/BinaryMuse/ddvdppeg/（请注意，标记升级为交互式应用程序之前有 1 秒的延迟，但仅用于演示目的）。

【讨论】：

我还没有尝试过，但我认为这就是答案，因为 JSFiddle 非常简单，而且可以正常工作。非常感谢。