ReactJS react-router RoutingContext

Question

Buduję aplikację izomorficzną przy użyciu ReactJS z modułem react-router dla celów routingu po stronie serwera.

od jego guide temat korzystania reagowania-router na serwerze:

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

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

    //... 
    }) 
} 

Nie ma prawie żadnych informacji na temat tego RoutingContext. Więc jest dla mnie niejasne, jak to działa. Czy jest to jakiś element zastępujący komponent Router z routera reagującego (używany na innych trasach)?

Każda pomoc w zrozumieniu zostanie doceniona!

Answer 1

RoutingContext to nieudokumentowana funkcja i zostanie zastąpiona przez RouterContext w wersji 2.0.0. Jego rolą jest synchroniczne renderowanie komponentu trasy.

Jest to po prostu element otaczający komponent, który wstrzykuje właściwości kontekstu, takie jak history, location i params.

Answer 2

React routera v4

w nowej wersji (v4) to został zaktualizowany do createServerRenderContext. Działa to w zupełnie inny sposób niż poprzednio, ale jest znacznie bardziej zwięzłe, ponieważ eliminuje również potrzebę stosowania "dopasowania".

ten przykładowy kod ma być stosowana jako wyraźnej middleware:

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 przykładem jest aplikacja, która pokazuje, jak to zrobić uniwersalny renderowania za pomocą createServerRenderContext

Answer 3

React routera v4

w nowy wersja (v4) została usunięta do createServerRenderContext. Działa to w inny sposób niż poprzednio, ale jest znacznie bardziej zwięzły.

ten mały przykład kodu ma być zastosowany.

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

Teraz jest to warstwa o sobie, gdy jest to 404