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

Question

我正在使用 React、react-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

您可以在RouterContext 上使用createElement 来实现此目的。

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

这将使userAgent 在所有路由组件的道具中可用。