react-router、radium 和服务器端渲染 - 警告：react 校验和无效

Question

当使用 react-router 和 Radium 进行服务器端渲染时，我收到以下警告，似乎来自 Radium 在客户端而不是在服务器上附加 css 前缀。

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) 8.$=10"><div style="-webkit-transition:b
(server) 8.$=10"><div style="transition:backgroun

我尝试在我的服务器端呈现代码中包含 radiumConfig，如下所示，但它似乎没有帮助。你有什么建议吗？

  match({ routes, location }, (error, redirectLocation, renderProps) => {
    if (redirectLocation)
      res.redirect(301, redirectLocation.pathname + redirectLocation.search)
    else if (error)
      res.status(500).send(error.message)
    else if (renderProps == null)
      res.status(404).send('Not found')
    else
      content = ReactDomServer.renderToString(<RoutingContext {...renderProps} radiumConfig={{userAgent: req.headers['user-agent']}} />);
      markup = Iso.render(content, alt.flush());
  });

我的路线如下所示，其中 App 组件由 Radium 包裹：

export default (
  <Route path="/" component={App}>
    <Route path="login" component={Login} />
    <Route path="logout" component={Logout} />
    <Route name="test" path="test" component={Test} />        
    <Route name="import" path="import" component={ImportPlaylist} />
    <Route name="player" path="/:playlist" component={Player} />
  </Route>
);

Answer 1

这是一个可行的解决方案。我需要按照@joshparolin 在 Github.

上的建议创建一个 Wrapper 组件

Wrapper.jsx:

import React from 'react';
import Radium from 'radium';

@Radium
export default class Wrapper extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
};

Server.jsx:

content = ReactDomServer.renderToString(<Wrapper radiumConfig={{userAgent: req.headers['user-agent']}}><RoutingContext {...renderProps} /></Wrapper>);
markup = Iso.render(content, alt.flush());

Client.jsx:

Iso.bootstrap((state, _, container) => {
  alt.bootstrap(state);
  ReactDOM.render(<Wrapper><Router history={createBrowserHistory()} children={routes} /></Wrapper>, container);
});

react-router、radium 和服务器端渲染 - 警告：react 校验和无效

react-router, radium and server side rendering - Warning: react checksum was invalid

css

checksum

reactjs

react-router