反应路由器，镭和服务器端渲染 - 警告：反应校验和无效

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

这是一个可行的解决方案。我需要按照 Github 上 @joshparolin 的建议创建一个 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);
});