javascript - ReactJS react 路由器 RoutingContext

Question

我正在使用 ReactJS 和 react-router 构建同构应用程序在服务器端用于路由目的的模块。

来自其guide关于在服务器上使用 react-router:

(req, res) => {      
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    //...

    else if (renderProps) {
      res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
    } 

    //...
  })
}

几乎没有关于这个RoutingContext的信息。所以我有点不清楚它是如何工作的。它是来自 react-router 的 Router 组件的某种替代品(在其他路由之上使用)吗？

任何有助于理解的帮助将不胜感激!

Answer 1

React 路由器 v4

在新版本 (v4) 中，它已更新为 createServerRenderContext。这与以前的工作方式截然不同，但更加简洁，因为它也消除了使用“匹配”的需要。

此代码示例将用作快速中间件:

import React from 'react';
import { renderToString } from 'react-dom/server';
import { ServerRouter/* , createServerRenderContext */ } from 'react-router';
// todo : remove line when this PR is live
// https://github.com/ReactTraining/react-router/pull/3820
import createServerRenderContext from 'react-router/createServerRenderContext';
import { makeRoutes } from '../../app/routes';

const createMarkup = (req, context) => renderToString(
  <ServerRouter location={req.url} context={context} >
    {makeRoutes()}
  </ServerRouter>
);

const setRouterContext = (req, res, next) => {
  const context = createServerRenderContext();
  const markup = createMarkup(req, context);
  const result = context.getResult();
  if (result.redirect) {
    res.redirect(301, result.redirect.pathname + result.redirect.search);
  } else {
    res.status(result.missed ? 404 : 200);
    res.routerContext = (result.missed) ? createMarkup(req, context) : markup;
    next();
  }
};

export default setRouterContext;

react-lego是一个示例应用程序，展示了如何使用 createServerRenderContext 进行通用渲染