Javascript 反应路由器渲染<；noscript>；在客户端_Javascript_Node.js_Reactjs_React Router

Javascript 反应路由器渲染<；noscript>；在客户端

javascript node.js reactjs

Javascript 反应路由器渲染<；noscript>；在客户端,javascript,node.js,reactjs,react-router,Javascript,Node.js,Reactjs,React Router,在服务器端，它呈现得很好，但当它到达客户端时，html的react部分消失，我得到以下错误： 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 clie

在服务器端，它呈现得很好，但当它到达客户端时，html的react部分消失，我得到以下错误：

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

警告：React试图重用容器中的标记，但校验和无效。这通常意味着您正在使用服务器呈现，并且在服务器上生成的标记不是客户机所期望的。React注入了新的标记以补偿其效果，但您已经失去了服务器呈现的许多好处。相反，请找出在客户端或服务器上生成的标记不同的原因：
（客户）我的问题实际上是在浏览项目时被吞没了。
当我为react router创建动态路由时，我没有在gulp运行时导入所有react类，而且它也没有将正确的包添加到bundle.js中
我想让它完全动态化，我会继续为这个问题寻找更好的解决方案，但目前我可以通过捆绑*.react.js来运行它。请注意这个“组件”：[null，null]在页面的json中
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'));
// });

<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>