反應路由器在客戶端呈現<noscript>

在服務器端它呈現很好，但是當它到達客戶端的反應HTML的一部分消失，我得到這個錯誤：反應路由器在客戶端呈現<noscript>

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')); 
// });

我tryed這三種方法的兩個率先給出了同樣的錯誤，第三說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>

和客戶端運行後，becames這樣的：

<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（）在服務器中。

謝謝

來源

2016-02-15 Luiz Silva

只是注意到這個「部件」：在頁面的JSON [NULL，NULL] –

我的問題實際上是在gulp瀏覽項目時。當我創建動態路由反應的路由器，我沒有被導入所有的反應類，而大口正在運行，並且它不正確的包添加到我的bundle.js。

我希望把它完全動態的，我會繼續對這個問題更好的解決方案的工作，但暫時我可以把它捆綁* .react.js運行。

來源

2016-02-16 11:08:25

反應路由器在客戶端呈現<noscript>

回答

相關問題