用客户端路由来响应服务器端渲染

Question

我的首页路由（/）的初始服务器呈现效果很好。

另外，随后的客户端导航到（/＃/ page2）也可以正常工作。

但是，如果我直接从地址栏中加载/＃/ page2，则服务器呈现的首页会先加载到浏览器中，然后明显过渡到/＃/ page2，这不是我想要的。 我只希望/＃/ page2出现而无需先刷新主页。

发生的情况是该节点正在为/的请求提供主页，然后当响应到达客户端时，客户端正在为/＃/ page2运行路由处理程序。 两者的行为均正确。 但这不是我想要的。

如何避免这种行为？

我认为我需要的是一种使服务器和客户端都知道不同路由并且都能够（同构地）处理它们的方法，但是，服务器不知道url的片段部分。

还有其他人有这个问题吗？

这个问题不是特定的反应。 它特定于SSR的深层链接。

我的节点路由器按以下方式处理“ /”

router.get('/', function(req, res) {
  var React = require('react');
  var Router = require('react-router');
  var Routes = require("../app/clapi-routes.jsx");

  var router = Router.create({location: req.url, routes: Routes});
  router.run(function(Handler, state) {
    var html = React.renderToString(<Handler/>);
    return res.render('index.ejs', {html:html});
  })
});

index.ejs只是：

<html lang="en">
  <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/css/json-inspector.css"/>
  </head>
<body style="margin:0">
  <%- html %>
  <script src="/build/bundle.js"></script>
</body>
</html>

Answer 1

停止使用由哈希驱动的导航。 #之后的所有内容仅在客户端使用，对于这种情况没有用。 因此/#/page2必须成为/page2 。

我不确定反应如何，但是其他路由系统也存在相同的问题，因此很容易关闭url中的# 。

在angular的ui路由器中是这样完成的： $locationProvider.html5Mode(true);

您的服务器端需要知道如何对客户端知道的所有URL做出反应，但这就是实现鲁棒性的方式-无论导航如何发生（客户端事件或链接点击），客户端和服务器都可以端到端处理方案。

Answer 2

我发现有两个步骤：

第一：将React路由器更改为使用Router.HistoryLocation而不是默认值（HashLocation）。这使您的路由使用html5推送状态，并将路由路径从/＃/ page2更改为/ page2

// in app.jsx (client side routing)

Router.run(AppRoutes, Router.HistoryLocation, function(Handler) {
  React.render(<Handler/>, document.body);
});

其次：确保您的节点页面路由全部返回相同的“ index.ejs”。 否则，您的路由（例如/ page2）将在整页刷新（或深层链接）时显示404

// in server.js (server side routing)

router.get('*', function(req, res) {
  Router.run(Routes, req.path, function(Handler) {
    var html = React.renderToString(<Handler/>);
    return res.render('index.ejs', {html: html});
  });
});

另外：如果您要提供“公共”静态资产 ，请在路由之前声明它，并删除可能具有的所有public / index.html ，以便节点路由器使用服务器呈现的内容处理/请求。

用客户端路由来响应服务器端渲染

问题描述

2 个解决方案

解决方案1
4 已采纳 2015-06-21 10:07:48

解决方案2
1 2015-06-22 02:12:32

用客户端路由来响应服务器端渲染

问题描述

2 个解决方案

解决方案1 4 已采纳 2015-06-21 10:07:48

解决方案2 1 2015-06-22 02:12:32

解决方案1
4 已采纳 2015-06-21 10:07:48

解决方案2
1 2015-06-22 02:12:32