如何在React Router組件上傳遞道具？

Question

在React Router中，我們這樣做：

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

用這樣的組件。

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

如何在路線中通過？ 我想到了將它分配給這樣的變量：

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

但是我必須傳遞if語句上的props。 這是我不起作用的解決方案

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

救命？

Answer 1

有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
);