Search code examples
reactjsfluxreactjs-flux

React router server side rendering with Fluxxor


I'm trying to update my web-app implementation from React Router 0.13.x to 1.0.0, which is using Fluxxor and server side rendering in back-end.

I didn't find any good migration guide to convert this code:

something.serve(function (req, res) {
    Router.run(routes, req.path, function (Root, state) {

        fetchData(state.routes).then(function (data) {
            var flux = new Flux(null, user, data, state.params, currencies, categories, sortTypes),
                serializedFlux = flux.serialize(),
                content = React.renderToString(
                    React.createElement(Handler, {
                        flux: flux,
                        params: state.params
                    })
                );
        });
    });
});

To new version. The below example in the react router is not also clear since it doesn't explain how we can access state.params or state.routes (or something similar) which are necessary to initialize flux stores.

React Router server rendering example:

import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import routes from './routes'

serve((req, res) => {
  // Note that req.url here should be the full URL path from
  // the original request, including the query string.
  match({ routes, location: req.url }, (error, redirectLocation,   renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname +   redirectLocation.search)
    } else if (renderProps) {
      res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
    } else {
      res.status(404).send('Not found')
    }
  })
})

Solution

  • Most of what's on state is now available via renderProps. Here's a mapping of the two state properties that you use:

    • state.routes -> renderProps.routes
    • state.params -> renderProps.params

    You can see what properties normally get passed via this bit of code