Question

我正在尝试将全栈React SSR样板更新为React Router 4，并且不确定如何在server.js中转换此特定代码块

// React server rendering
app.use((req, res) => {
// app.use(function(req, res) {
  const initialState = {
    auth: { token: req.cookies.token, user: req.user },
    messages: {}
  };

  const store = configureStore(initialState);

  Router.match({ routes: routes.default(store), location: req.url }, (err, redirectLocation, renderProps) => { // updated ES6
  // Router.match({ routes: routes.default(store), location: req.url }, function(err, redirectLocation, renderProps) { // default ES5
    if (err) {
      res.status(500).send(err.message);
    } else if (redirectLocation) {
      res.status(302).redirect(redirectLocation.pathname + redirectLocation.search);
    } else if (renderProps) {
      const html = ReactDOM.renderToString(React.createElement(Provider, { store: store },
        React.createElement(Router.RouterContext, renderProps)
      ));
      res.render('layouts/main', {
        html: html,
        initialState: store.getState()
      });
    } else {
      res.sendStatus(404);
    }
  });
});

我在确定如何更新路由器线路时遇到麻烦：

Router.match({ routes: routes.default(store), location: req.url }, (err, redirectLocation, renderProps) => {

我很确定应该以某种方式在这里使用来自react-router-config的matchRoutes，但我不确定如何...？

以及实际的渲染部分：

} else if (renderProps) {
      const html = ReactDOM.renderToString(React.createElement(Provider, { store: store },
        React.createElement(Router.RouterContext, renderProps)
      ));

我很确定StaticRouter会在这里某处...

只需要一点帮助（简单的示例）就可以开始使用了，它是一个古老而又不错的样板，并且需要更新到RRv4。

将React Router v3 ssr转换为React Router v4 ssr

0 个答案: