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')
}
})
})
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