使用 Fluxxor 响应路由器服务器端渲染

Question

我正在尝试将我的 Web 应用程序实现从 React Router 0.13.x 更新到 1.0.0，后者在后端使用 Fluxxor 和服务器端渲染。

我没有找到任何好的迁移指南来转换此代码：

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

到新版本。反应路由器中的以下示例也不清楚，因为它没有解释我们如何访问初始化通量存储所必需的 state.params 或 state.routes （或类似的东西）。

React 路由器 server rendering 示例：

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

Answer 1

state 上的大部分内容现在都可以通过 renderProps 获得。这是您使用的两个 state 属性的映射：

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

您可以查看通常通过 this bit of code

传递的属性

使用 Fluxxor 响应路由器服务器端渲染

React router server side rendering with Fluxxor

flux

reactjs

reactjs-flux