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

Question

在服务器端它呈现得很好，但是当它到达客户端时，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() 相同的方法。

谢谢

Answer 1

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

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

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

react router rendering <noscript> in client side

javascript

node.js

reactjs

react-router