Reactjs 如何将道具传递给管线中的组件？

我使用

with layout

环绕交换机路由中的每个组件。但这样做，我无法在

登录

页面中继承

道具。我的App.js文件如下所示：

function withLayout(WrappedComponent, props) {
  // ...and returns another component...
  return class extends React.Component {
    render() {
      return (
        <Layout>
          <WrappedComponent></WrappedComponent>
        </Layout>
      );
    }
  };
}

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Provider store={store}>
          <Router>
            <React.Suspense fallback={<div></div>}>
              <Switch>
                <Route exact path="/" component={withLayout(HomePage)} />
                <Route exact path="/login" component={withLayout(SignIn)} />
                <Route
                  exact
                  path={["/apply"]}
                  component={withLayout(NewQuote)}
                />
              </Switch>
            </React.Suspense>
          </Router>
        </Provider>
      </React.Fragment>
    );
  }
}

export default withRouter(App);

带布局的函数（包装组件、道具）{
//…并返回另一个组件。。。
返回类扩展了React.Component{
render（）{
返回(
);
}
};
}
类应用程序扩展组件{
render（）{
返回(
);
}
}
使用路由器（App）导出默认值；

如果不使用布局包装器，我只需执行以下操作即可获得道具：

component={props => <SignIn {...props} />}

component={props=>}

但是现在，如何通过在组件周围使用包装器来获得道具呢？谢谢
 看来我可以直接把下面的内容放到道具中，让道具传递给do子组件

<Route
                  exact
                  path="/login"
                  component={props => (
                    <Layout>
                      <SignIn {...props} />
                    </Layout>
                  )}
                />

(
)}
/>