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

我正在使用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> 
    ); 
    } 
}

来源

2016-05-22 Gershon Papi

您可以使用createElement上RouterContext实现这一目标。

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

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

来源

2016-08-25 18:14:30

谢谢，我最终使用了一个虚拟组件“Root”，我将道具传递给它，它将成为'RouterContext'的父项。你的解决方案更好:) –

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

回答

相关问题