FormidableLabs/radium

Server Side Rendering with react-router

オープン

#429 opened on 2015/11/17

 (8 件のコメント) (0 件のリアクション) (0 人の担当者)JavaScript (352 件のフォーク)batch import
docshelp wanted

Repository metrics

Stars
 (7,414 個のスター)
PR merge metrics
 (PR metrics pending)

説明

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

コントリビューターガイド