Note: This applies to older versions of React. If you’re using React 16, you should use ReactDOM.hydrate() Also, the below suggestion will result in a client-side re-render, as suggested by one of the answers below. This may sound crazily simple, but in your server-side template, wrap your React markup in an extra <div>: <!– hypothetical … Read more
Just update stylesheet’s path that you want to be dynamically loaded by using react’s state. import * as React from ‘react’; export default class MainPage extends React.Component{ constructor(props){ super(props); this.state = {stylePath: ‘style1.css’}; } handleButtonClick(){ this.setState({stylePath: ‘style2.css’}); } render(){ return ( <div> <link rel=”stylesheet” type=”text/css” href={this.state.stylePath} /> <button type=”button” onClick={this.handleButtonClick.bind(this)}>Click to update stylesheet</button> </div> ) … Read more
You could check the complete property on the image before applying the onload event. if (!img.complete) { // add onload listener here }
Take a look at dispatchr and yahoo’s related libraries. Most flux implementations don’t work in node.js because they use singleton stored, dispatchers, and actions, and have no concept of “we’re done” which is required to know when to render to html and respond to the request. Yahoo’s libraries like fetchr and routr get around this … Read more
Using react-router1.0 and react0.14, we were mistakenly serializing our flux object multiple times. RoutingContext will call createElement for every template in your react-router routes. This allows you to inject whatever props you want. We also use flux. We send down a serialized version of a large object. In our case, we were doing flux.serialize() within … Read more
This will solve the issue. // Fix: Expected server HTML to contain a matching <a> in const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate; renderMethod( <BrowserRouter> <RoutersController data={data} routes={routes} /> </BrowserRouter>, document.getElementById(‘root’) );