ReactJS react-router RoutingContext

我正在使用ReactJS与react-router模块构build同构应用程序，以便在服务器端进行路由。

从其在服务器上使用react-router的指南 ：

(req, res) => { match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { //... else if (renderProps) { res.status(200).send(renderToString(<RoutingContext {...renderProps} />)) } //... }) } 

几乎没有关于这个RoutingContext的信息。 所以对于我来说它的工作原理还不太清楚。 它是从反应路由器（在其他路线顶部使用）的某种Router组件的替代？

任何帮助理解将非常感激！

Answer 1

反应路由器v4

在新版本（v4）中它已被更新为createServerRenderContext 。 这个工作方式与以前截然不同，但是更加简洁，因为它也摆脱了使用“匹配”的需要。

这个代码示例是作为expression中间件应用的：

 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进行通用渲染

Answer 2

RoutingContext是一个未RouterContextfunction，将被RouterContext中的RouterContextreplace。 它的作用是同步呈现路由组件。

它只是一个围绕组件的包装，它注入了history ， location和params等上下文属性。

Answer 3

反应路由器v4

在新版本（v4）中它已经被删除到createServerRenderContext。 这个工作方式与以前截然不同，但要简洁得多。

这个小代码的例子是应用。

 import { StaticRouter } from'react-router-dom' const context = {} const mockup = renderToString( <Provider store = {store}> <IntlProvider locale = {locale} messages = {messages[locale]}> <StaticRouter location={request.url} context={context}> <ModuleReactWithPages /> </StaticRouter> </IntlProvider> </Provider> ) 

现在它是404的一个层次