FormidableLabs/radium

Server Side Rendering with react-router

开放

#429 创建于 2015年11月17日

 (8 条评论) (0 个反应) (0 位负责人)JavaScript (352 个派生)batch import
docshelp wanted

仓库指标

星标
 (7,414 个星标)
PR 合并指标
 (PR 指标待抓取)

描述

When doing server side rendering with react-router and Radium I get the following warning that appears to come from Radium appending css prefixes on the client but not on the server.

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

I tried to include radiumConfig within my server side rendering code, as shown below, but it doesn't appear to help. Do you have any suggestions?

  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());
  });

And my routes look like the following, where the App component is wrapped by 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>
);

贡献者指南