ReactJS react-router RoutingContext

Question

Sto costruendo un'applicazione isomorfa utilizzando ReactJS con il modulo react-router per scopi di routing sul lato server.

Dalla sua guide sull'utilizzo di reagire-router sul server:

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

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

    //... 
    }) 
} 

Non c'è quasi nessuna informazione su questo RoutingContext. Quindi per me non è chiaro come funziona. È una sorta di sostituzione del componente Router dal router di risposta (utilizzato in cima ad altri percorsi)?

Qualsiasi aiuto nella comprensione sarà davvero apprezzato!

Answer 1

RoutingContext è una funzionalità non documentata e verrà sostituito da RouterContext nella v2.0.0. Il suo ruolo è quello di rendere in modo sincrono il componente del percorso.

È semplicemente un wrapper attorno al componente che inserisce proprietà del contesto come history, location e params.

Answer 2

Reagire router v4

nella nuova versione (v4) è stato aggiornato alla createServerRenderContext. Funziona in modo molto diverso rispetto al passato, ma è molto più conciso in quanto elimina anche la necessità di utilizzare 'match'.

questo esempio di codice deve essere applicato come middleware di Express:

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 è un'applicazione di esempio che mostra come fare il rendering universale usando createServerRenderContext

Answer 3

Reagire router v4

nel nuovo versione (v4) è stata cancellata in createServerRenderContext. Funziona in modo molto diverso rispetto al passato ma è molto più conciso.

questo piccolo esempio di codice deve essere applicato.

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

Ora è uno strato di se stesso quando si tratta di un 404