将反应路由器中的道具传递给服务器上的子项

Question

我正在使用React,react-router v3和material-ui构建一个Isomorphic应用程序.在服务器端呈现中,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

您可以使用createElementonRouterContext来实现此目的。

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

这将userAgent在所有路由组件的 props 中可用。