Передача реквизита от реагирующего маршрутизатора на детей на сервере

Question

Я строю изоморфное приложение, используя React, response-router v3 и material-ui. Одним из требований material-ui в рендеринге на стороне сервера является переход к теме пользовательского агента клиента, поэтому MUI сможет префикс их встроенных стилей соответственно.

Первоначально корневой компонент приложения был маршрутизатор, то есть на стороне сервера:

<RouterContext {...renderProps}/> 

И на клиенте:

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

Теперь, так как я не знаю, как передайте пользовательский агент на RouterContext на сервере, я придумал решение (уродливое?): я создал бесполезный компонент с именем Root, которому я передал пользовательский агент, а Root имел маршрутизатор как его children, т.е. на стороне сервера:

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

и на клиенте:

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

Теперь все работает хорошо, но я на самом деле не нравится создавать что бесполезный элемент, если я не должен, так что мой вопрос - есть ли лучший путь?

Могу ли я каким-либо образом передать агенту пользователя RouterContext на сервер, который, в свою очередь, передаст его в указательный маршрут, который создаст тему?

Вот код Root если кто-то интересуется:

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

Вы можете использовать createElement на RouterContext для достижения этой цели.

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

Это сделает userAgent доступно реквизит всех компонентов маршрута.