ReactJS反応ルータRoutingContext

Question

私は、サーバ側でルーティングのためにReactJSを使用してreact-routerモジュールを使用して同形アプリケーションを構築しています。反応-ルータをサーバー上で使用についてそのguideから

：

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

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

    //... 
    }) 
} 

このRoutingContextについてほとんど情報があります。だから私はそれがどのように機能するかははっきりしない。それは反応ルータからのRouterコンポーネント（他のルートの上で使用される）の代わりの何らかの種類ですか？

本当にありがとうございます。

Answer 1

RoutingContextは文書化されていない機能であり、v2.0.0ではRouterContextに置き換えられます。その役割は、ルートコンポーネントを同期的にレンダリングすることです。

これは、コンポーネントの周りのラッパーで、history、location、およびparamsなどのコンテキストプロパティを注入します。

Answer 2

はそれがcreateServerRenderContextに更新されている新しいバージョン（V4）でルータV4

を反応します。これは以前とは非常に異なる方法で動作しますが、 'match'を使用する必要性を取り除くため、はるかに簡潔です。

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が

Answer 3

createServerRenderContextが新しいルータ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