Question

我正在使用React，react-router v3和material-ui构建一个Isomorphic应用程序。服务器端呈现中的材料-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在所有路径组件的道具中可用。

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

1 个答案: