Wie Requisiten auf React Router-Komponente übergeben?

Question

In Router Reaktion, wir tun es wie folgt aus:

<BrowserRouter> 
    <Route path="/(:filter)?" component={App} /> 
</BrowserRouter> 

mit einer Komponente wie diese.

<MuiThemeProvider> 
    <QueryRenderer 
     environment={modernEnvironment} 
     query={graphql` 
     query appQuery($count: Int! $cursor: String) { 
      viewer { 
      ...TodoApp_viewer 
      } 
     } 
     `} 
     variables={{ count: 5, cursor:'' }} 
     render={({error, props}) => { 
     if (props) { 
      return <TodoApp viewer={props.viewer} />; 
     } else { 
      return <div>Loading</div>; 
     } 
     }} 
    /> 
    </MuiThemeProvider> 

Wie gebe ich es in einer Route? Ich dachte, es in einem var etwas wie folgt zuweisen:

var myComponent = <MuiThemeProvider> 
     <QueryRenderer ..../> </MuiThemeProvider> 

aber ich habe Requisiten passieren, wie Sie es sehen auf der if-Anweisung. Dies ist meine Lösung, die nicht funktioniert

Hilfe?

Answer 1

Mit einem HOC?

class MuiThemeProviderContainer { 
    render() { 
    <MuiThemeProvider> 
     <QueryRenderer 
     environment={modernEnvironment} 
     query={graphql` 
      query appQuery($count: Int! $cursor: String) { 
      viewer { 
       ...TodoApp_viewer 
      } 
      } 
     `} 
     variables={{ count: 5, cursor:'' }} 
     render={({error, props}) => { 
      if (props) { 
      return <TodoApp viewer={props.viewer} />; 
      } else { 
      return <div>Loading</div>; 
      } 
     }} 
     /> 
    </MuiThemeProvider> 
    } 
} 

ReactDOM.render(
    <Switch> 
    <Route exact path='/' component={MuiThemeProviderContainer}/> 
    </Switch>, 
    mountNode 
);