如何在React Router组件上传递道具？

Question

In React Router, we do it like this:

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

With a component like this.

<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>

How do I pass it in a Route? I thought of assigning it in a var something like this:

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

but I have to pass props as you see there on the if statement. This is my solution that do not work

const todoApp = <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={todoApp}/>
  </Switch>
  ,
  mountNode
);

Help?

Answer 1

With a 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
);