将道具从React Router传递到服务器上的子代

Question

I'm building an Isomorphic app using React, react-router v3 and material-ui. One of the requirements of material-ui in server-side rendering is to pass to the theme the client's user agent, so MUI will be able to prefix their inline styles accordingly.

Originally the root component of the app was the router, ie on the server side:

<RouterContext {...renderProps}/>

And on the client:

<Router children={routes} history={browserHistory} />

Now, since I didn't know how to pass the user agent to the RouterContext on the server, I came up with an (ugly?) solution: I've created a useless component named Root, to whom I passed the user agent, and Root had the router as his children , ie on the server side:

<Root userAgent={userAgent}>
  <RouterContext {...renderProps}/>
</Root>

and on the client:

<Root>
  <Router children={routes} history={browserHistory} />
</Root>

Now, everything works well but I don't really like creating that useless element if I don't have to, so my question is - is there a better way?

Can I somehow pass the user agent to RouterContext on the server, which will in turn pass it to the Index Route which will create the theme?

Here's the code of Root if someone's interested:

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

You can use createElement on RouterContext to achieve this.

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

This will make userAgent available in the props of all route components.