javascript - 将 Prop 从 react 路由器传递给服务器上的 child

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 在所有路由组件的 props 中可用。