a tunnel / etc • HTTP request hangs • Firewalls • ISP is interfering • A browser addon is messing with you • Your CDN is down Stuart Langridge's Flowchart
figuring out how this stuff works. Some of the code shown here isn't the easiest, or the APIs aren't that straight forward. This will change as we learn more. Don't expect this to be 100% smooth!
'./routes'; // match is responsible for matching routes against a URL // RouterContext renders the components in the matched routes import { match, RouterContext } from 'react-router';
request match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { // match figures out which routes match, and calls this callback with the arguments above // error : given if something went wrong matching a route // redirectLocation : returned if the URL matches a redirect // renderProps : given if a route was matched and we can render ... });
renderProps that means we have a match and can render res.render('index', { // RouterContext is React Router's wrapper around our own components // and renderProps contains all the info React Router needs to render our app markup: renderToString(<RouterContext {...renderProps} />) }); } else { ... }
figured out the best way to deal with loading data on the server and client with React components. This is very, very new terrirory and things are not settled yet. This will get a little messy!
of React Router). Warning: Async Props is not production ready yet, but I like the approach enough to consider it safe to demo. npm install --save async-props
that loads the data. All we need to do is define it, and AsyncProps will take care of the rest. We can then refer to that data on this.props without worrying about if it's loaded or not, because AsyncProps ensures that it is.
and scriptTag. • The scriptTag is needed to transfer the data from server to client. We change our index.ejs template: <div id="app"><%- markup %></div> <%- scriptTag %> <script src="build.js"></script>