將反應路由器中的道具傳遞給服務器上的兒童

我正在使用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'的父項。你的解決方案更好:) –

將反應路由器中的道具傳遞給服務器上的兒童

回答

相關問題