Question

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

＆＃xA;＆＃xA;

 警告：React尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器呈现，并且在服务器上生成的标记不是客户端所期望的。 React注入了新的标记以补偿哪些有效但你已经失去了服务器渲染的许多好处。相反，弄清楚为什么生成的标记在客户端或服务器上是不同的：＆＃xA;（客户端）＆lt; noscript data-reacti＆＃xA;（服务器）＆lt; div data-reactid =“。z＆＃xA; < / code>

＆＃xA;＆＃xA; 这是压缩前的客户端代码：
＆＃xA;＆＃xA;   import {Router，RouterContext，来自“react-router”的browserHistory;＆＃xA;从“react”导入React;＆＃xA;从“react-dom”导入ReactDOM;＆＃xA;＆＃xA;＆＃xA; const innerHTML = document。 getElementById（'react-routes'）。innerHTML;＆＃xA; const routes = JSON.parse（innerHTML）;＆＃xA; console.log（routes）;＆＃xA;＆＃xA; // ReactDOM.render（ ＆lt; RouterContext {... routes} /＆gt ;, document.getElementById（'react-app'））;＆＃xA;＆＃xA; ReactDOM.render（＆lt; Router＆gt; {routes.routes}＆lt; / Router＆gt ;，document.getElementById（'react-app'））;＆＃xA;＆＃xA; // Router.run（routes，Router.HistoryLocation，function（Handler）{＆＃xA; // React.render（＆lt; ; Handler /＆gt ;, document.getElementById（'app'））;＆＃xA; //}）;＆＃xA;  
＆＃xA;＆＃xA;  I'尝试了这三种方法的两个第一个gi同样的错误，第三个说Router.run不是一个函数。 （第三个是我几个版本之前的工作）
＆＃xA;＆＃xA; 服务器生成的HTML是这样的：
＆＃xA;＆＃xA; < pre> ＆lt; html lang =“en”＆gt;＆＃xA; ＆LT; HEAD＆GT;＆＃XA; ＆lt; meta charset =“utf-8”＆gt;＆＃xA; ＆lt; meta http-equiv =“Content-Type”content =“text / html; charset = UTF-8”＆gt;＆＃xA; ＆lt; meta http-equiv =“X-UA-Compatible”content =“IE = edge”＆gt;＆＃xA; ＆lt; meta name =“viewport”content =“width = device-width，initial-scale = 1”＆gt;＆＃xA; ＆lt; link rel =“stylesheet”type =“text / css”href =“css / style.css”＆gt;＆＃xA; ＆LT; /头＆GT;＆＃XA; ＆LT;身体GT;＆＃XA;＆＃XA; ＆lt; div id =“react-app”＆gt;＆lt; div data-reactid =“。1rbyhm4ruo0”data-react-checksum =“ -  854297298”＆gt;＆lt; span data-reactid =“。1rbyhm4ruo0.0”＆gt;您好＆lt; / span＆gt;＆lt; span data-reactid =“。1rbyhm4ruo0.1”＆gt; BLBALBLABA LUIZ＆lt; / span＆gt;＆lt; div data-reactid =“。1rbyhm4ruo0.2”＆gt;＆lt; input type =“text” value =“Login”data-reactid =“。1rbyhm4ruo0.2.0”＆gt;＆lt; span data-reactid =“。1rbyhm4ruo0.2.1”＆gt; Hello＆lt; / span＆gt;＆lt; span data-reactid =“。1rbyhm4ruo0.2.2 “＆GT;登录＆LT; /跨度＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆＃XA;＆＃XA; ＆lt; script id =“react-routes”type =“application / json”＆gt; {“routes”：[{“name”：“public”，“path”：“/”，“childRoutes”：[{“name “：” 登录”， “路径”： “/登录”}]}，{ “名称”： “登录”， “路径”： “/登录”}]， “PARAMS”：{}， “位置”：{ “路径名”： “/登录”， “搜索”： “”， “散”： “”， “状态”：空， “行动”： “POP”， “关键”： “zc9mx1”， “查询”：{ }， “$ searchBase”：{ “搜索”： “”， “searchBase”： “”}， “组件”：NULL，NULL]， “历史”：{}， “路由器”：{ “__ v2_compatible__”：真}， “matchContext”：{ “历史”：{} “的TransitionManager”：{}， “路由器”：{ “__ v2_compatible __”：真}}}＆LT; /脚本＆GT;＆＃XA;＆＃XA; ＆lt; script src =“https://cdn.socket.io/socket.io-1.1.0.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script src =“/ public / js / bundle.js”＆gt;＆lt; / script＆gt;＆＃xA;＆＃xA;＆＃xA;＆lt; / body＆gt;＆lt; / html＆gt;＆＃xA;  ＆＃xA;＆＃xA; 在客户端运行之后就是这样：
＆＃xA;＆＃xA;  ＆lt; html lang =“烯“＆GT;＆LT; HEAD＆GT;＆＃XA; ＆lt; meta charset =“utf-8”＆gt;＆＃xA; ＆lt; meta http-equiv =“Content-Type”content =“text / html; charset = UTF-8”＆gt;＆＃xA; ＆lt; meta http-equiv =“X-UA-Compatible”content =“IE = edge”＆gt;＆＃xA; ＆lt; meta name =“viewport”content =“width = device-width，initial-scale = 1”＆gt;＆＃xA; ＆lt; link rel =“stylesheet”type =“text / css”href =“css / style.css”＆gt;＆＃xA; ＆LT; /头＆GT;＆＃XA; ＆LT;身体GT;＆＃XA; ＆lt; div id =“react-app”＆gt;＆lt; noscript data-reactid =“。zhdkkenpq8”＆gt;＆lt; / noscript＆gt;＆lt; / div＆gt;＆＃xA;＆＃xA; ＆lt; script id =“react-routes”type =“application / json”＆gt; {“routes”：[{“name”：“public”，“path”：“/”，“childRoutes”：[{“name “：” 登录”， “路径”： “/登录”}]}，{ “名称”： “登录”， “路径”： “/登录”}]， “PARAMS”：{}， “位置”：{ “路径名”： “/登录”， “搜索”： “”， “散”： “”， “状态”：空， “行动”： “POP”， “关键”： “qbhof0”， “查询”：{ }， “$ searchBase”：{ “搜索”： “”， “searchBase”： “”}， “组件”：NULL，NULL]， “历史”：{}， “路由器”：{ “__ v2_compatible__”：真}， “matchContext”：{ “历史”：{} “的TransitionManager”：{}， “路由器”：{ “__ v2_compatible __”：真}}}＆LT; /脚本＆GT;＆＃XA; ＆lt; script src =“https://cdn.socket.io/socket.io-1.1.0.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script src =“/ public / js / bundle.js”＆gt;＆lt; / script＆gt;＆＃xA;＆＃xA;＆＃xA;＆lt; / body＆gt;＆lt; / html＆gt;＆＃xA;  
＆＃xA;＆＃xA; 我在服务器中使用相同的方法renderToString（）。
＆＃xA;＆＃xA; 谢谢＆＃XA;

Answer 1

我的问题实际上是在浏览项目时吞咽了一下。当我正在创建反应路由器的动态路由时，我没有在gulp运行时导入所有反应类，并且它没有将正确的包添加到我的bundle.js。

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

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

1 个答案: