Passare gli oggetti di scena dal router di reazione ai bambini sul server

Question

Sto costruendo un'app isomorfa usando React, react-router v3 e material-ui. Uno dei requisiti di material-ui nel rendering lato server è quello di passare al tema l'agente utente del client, quindi MUI sarà in grado di prefissare di conseguenza i propri stili in linea.

Originariamente il componente principale del app era il router, cioè sul lato server:

<RouterContext {...renderProps}/> 

E sul client:

<Router children={routes} history={browserHistory} /> 

Ora, dal momento che io non so come passare lo user agent allo RouterContext sul server, ho trovato una soluzione (brutta?): ho creato un componente inutile chiamato Root, a cui ho passato l'user agent, e Root aveva il router come suo children, cioè sul lato server:

<Root userAgent={userAgent}> 
    <RouterContext {...renderProps}/> 
</Root> 

e sul client:

<Root> 
    <Router children={routes} history={browserHistory} /> 
</Root> 

Ora, tutto funziona bene, ma non mi piace molto la creazione di tale elemento inutile se io non devo, quindi la mia domanda è - c'è un modo migliore?

Posso in qualche modo passare l'agente utente a RouterContext sul server, che a sua volta lo passerà alla Route dell'indice che creerà il tema?

Ecco il codice di Root se qualcuno è interessato:

class Root extends React.Component { 
    constructor(props){ 
    super(); 
    this.muiTheme = getMuiTheme(customTheme, { userAgent: props.userAgent }); 
    } 

    render() { 
    return (
    <MuiThemeProvider muiTheme={this.muiTheme}> 
     {this.props.children} 
    </MuiThemeProvider> 
    ); 
    } 
} 

Answer 1

È possibile utilizzare createElement su RouterContext per raggiungere questo obiettivo.

<RouterContext 
    {...renderProps} 
    createElement={(Component, props) => <Component {...props} userAgent={data.userAgent} />} 
/> 

Questo renderà userAgent disponibile nei puntelli di tutti i componenti del percorso.