在客户端反应路由器渲染 <noscript>答案

【问题标题】：react router rendering <noscript> in client side在客户端反应路由器渲染 <noscript>
【发布时间】：2016-05-26 21:13:48
【问题描述】：

在服务器端它渲染得很好，但是当它到达客户端时，html 的反应部分消失了，我得到了这个错误：

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <noscript data-reacti
(server) <div data-reactid=".z

这是我压缩前的客户端代码：

import {Router, RouterContext, browserHistory} from "react-router";
import React from "react";
import ReactDOM from "react-dom";


const innerHTML = document.getElementById('react-routes').innerHTML;
const routes = JSON.parse(innerHTML);
console.log(routes);

// ReactDOM.render(<RouterContext {...routes} />, document.getElementById('react-app'));

ReactDOM.render(<Router>{routes.routes}</Router>, document.getElementById('react-app'));

// Router.run(routes, Router.HistoryLocation, function (Handler) {
//   React.render(<Handler/>, document.getElementById('app'));
// });

我已经尝试了这三种方法，两种第一次给出了相同的错误，第三个说 Router.run 不是一个函数。（第三个是我前几个版本的工作）

服务器生成的HTML是这样的：

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>

    <div id="react-app"><div data-reactid=".1rbyhm4ruo0" data-react-checksum="-854297298"><span data-reactid=".1rbyhm4ruo0.0">Hello </span><span data-reactid=".1rbyhm4ruo0.1">BLBALBLABA LUIZ</span><div data-reactid=".1rbyhm4ruo0.2"><input type="text" value="Login" data-reactid=".1rbyhm4ruo0.2.0"><span data-reactid=".1rbyhm4ruo0.2.1">Hello </span><span data-reactid=".1rbyhm4ruo0.2.2">Login</span></div></div></div>

    <script id="react-routes" type="application/json">{"routes":[{"name":"public","path":"/","childRoutes":[{"name":"login","path":"/login"}]},{"name":"login","path":"/login"}],"params":{},"location":{"pathname":"/login","search":"","hash":"","state":null,"action":"POP","key":"zc9mx1","query":{},"$searchBase":{"search":"","searchBase":""}},"components":[null,null],"history":{},"router":{"__v2_compatible__":true},"matchContext":{"history":{},"transitionManager":{},"router":{"__v2_compatible__":true}}}</script>

    <script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
    <script src="/public/js/bundle.js"></script>


</body></html>

客户端运行后变成了这样：

<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <div id="react-app"><noscript data-reactid=".zhdkkenpq8"></noscript></div>

    <script id="react-routes" type="application/json">{"routes":[{"name":"public","path":"/","childRoutes":[{"name":"login","path":"/login"}]},{"name":"login","path":"/login"}],"params":{},"location":{"pathname":"/login","search":"","hash":"","state":null,"action":"POP","key":"qbhof0","query":{},"$searchBase":{"search":"","searchBase":""}},"components":[null,null],"history":{},"router":{"__v2_compatible__":true},"matchContext":{"history":{},"transitionManager":{},"router":{"__v2_compatible__":true}}}</script>
    <script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
    <script src="/public/js/bundle.js"></script>


</body></html>

我在服务器中使用相同的方法来 renderToString()。

谢谢

【问题讨论】：

只注意页面json中的这个“components”:[null,null]

标签： javascript node.js reactjs react-router

【解决方案1】：

我的问题实际上是在浏览项目时大吃一惊。因为我正在为 react-router 创建动态路由，所以在 gulp 运行时我没有导入所有的 react 类，并且它没有将正确的包添加到我的 bundle.js 中。

我想让它完全动态化，我会继续为这个问题寻找更好的解决方案，但目前我可以通过捆绑 *.react.js 来让它运行。

【讨论】：