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

Question

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

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

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

• 使服务器呈现为this。
• 当我在客户端上呈现时，使Link组件正常工作。

我的问题：

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

Answer 1

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

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