如何使用cloneElement将props传递给Route的组件？

Question

说道路是

<App>
  <Route path='/login' component={Login}/>
</App>

在App.js中我有以下

React.Children.map(props.children, function (child) {
       return React.cloneElement(child, {
          foo: 'bar'
       })
});

但foo: bar并未出现在Login组件的道具内。

如果我将<Route path='/login' component={Login}/>替换为<Login />，那么我会获得foo: bar道具。

我的问题是如何将道具传递给App儿童（Route），以便将这些道具传递给相应的component。

Answer 1

我不确定它是否适用于您的使用案例，但<Route>配备了render prop：

<App>
  <Route 
    path='/login' 
    render={routerProps => (
      <Login 
        {...routerProps} 
        foo='bar' />
    )} />
</App>