将道具从反应路由器传递到服务器上的 children

Question

我正在使用 React、react-router v3 和 material-ui 构建同构应用程序。 material-ui 在 server-side 呈现中的要求之一是将客户端的用户代理传递给主题，因此 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 在所有路线组件的道具中可用。

将道具从反应路由器传递到服务器上的 children

Passing props from react router to children on the server

javascript

reactjs

react-router

material-ui