异步路由导致服务器端校验和无效错误 [英] Async Routes Causes Server-Side Checksum Invalid Error

问题描述

我正在使用 Webpack、react、react-router、react-redux、redux 和 simple-redux-router.

我在使用 react-router 和异步路由和服务器端渲染时遇到这个错误:

bundle.js:1 警告:React 尝试在容器中重用标记，但校验和无效.这通常意味着您正在使用服务器渲染并且服务器上生成的标记不是客户端所期望的.React 注入了新的标记来补偿哪些有效，但您已经失去了服务器渲染的许多好处.相反，找出为什么在客户端或服务器上生成的标记不同:(客户端) <noscript data-reacti(服务器) <div data-reactid=".1

我的 routes.cjsx 有这个:

# Routes路径:'游戏'getComponent: (location, cb) =>require.ensure [], (require) =>cb null，需要'./views/game'

如果我把它改成这个，我就不会再收到那个错误:

# Routes路径:'游戏'getComponent: (location, cb) =>cb null，需要'./views/game'

在使用异步路由时有没有更好的方法来处理这个问题?

解决方案

我得到的原因是 您正在尝试使用服务器渲染将组件渲染到文档，但校验和无效.这通常意味着您在客户端上渲染了与服务器上不同的组件类型或道具，或者您的 render() 方法不纯.

并通过在客户端上使用 match 修复它，如下所述:https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md#async-routes>

文档建议:

match({ history, routes }, (error, redirectLocation, renderProps) => {render(<Router {...renderProps}/>, mountNode)})

对我有用的特定非 JSX 客户端代码(将稍微重构一下):

var match = ReactRouter.match;var Router = React.createFactory(ReactRouter.Router);var Provider = React.createFactory(ReactRedux.Provider)匹配({历史:appHistory，路线:路线}，功能(错误，redirectLocation，renderProps){ReactDOM.render(提供者({商店:商店}，路由器(renderProps))，$(文件)[0]);});

I'm using Webpack, react, react-router, react-redux, redux, and simple-redux-router.

I got this error while using react-router with async routes and server-side rendering:

bundle.js:1 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=".1

My routes.cjsx has this:

# Routes
path: 'game'
getComponent: (location, cb) =>
    require.ensure [], (require) =>
        cb null, require './views/game'

If I change it to this, I no longer get that error:

# Routes
path: 'game'
getComponent: (location, cb) =>
    cb null, require './views/game'

Is there a better way to deal with this issue when using async routes?

解决方案

I got this as You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure.

And fixed it by using match on the client, as described here: https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md#async-routes

The doc suggests:

match({ history, routes }, (error, redirectLocation, renderProps) => {
  render(<Router {...renderProps} />, mountNode)
})

Specific non-JSX client-side code that works for me (will refactor a bit):

var match = ReactRouter.match;
var Router = React.createFactory(ReactRouter.Router);
var Provider = React.createFactory(ReactRedux.Provider)
match({ history: appHistory, routes: routes }, function (error, redirectLocation, renderProps) {
  ReactDOM.render(
      Provider({store: store},
      Router(renderProps)),
        $(document)[0]
  );
});

这篇关于异步路由导致服务器端校验和无效错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！