将道具传递给props.children，收到错误的道具

Question

App.js是我的页面的包装器，它是包含路径的布局。最初我的路线在App.js中，但我想要它们在更高阶的组件中，所以我可以创建不被App包装的路线。

这是我目前的设置：

  

index.js

ReactDom.render(
  <Provider>
    <BrowserRouter>
      <Route path='/' [...] />  // <-- Component which is NOT wrapped in App
      <App>
        <Route path='/about' component={About} /> // <-- I want About to receive the props from App
      </App>
    </BrowserRouter>
  </Provider>
);

我的App.js拥有Header，Sidebar和Footer组件。 App.js是我用connect（）导出的组件，我用app.js中的mapStateToProps和mapDispatchToPros映射我的redux状态和动作

要将道具传递给，比方说，关于，我尝试了不同的东西，结果相同，其中一个是：

  

App.js

{React.cloneElement(this.props.children, {...this.props})}

然而，我在About中收到的道具与我传下来的道具完全不同。它们是这样的：（json）

{“match”：{“path”：“/ about”，“url”：“/ about”，“isExact”：true [...]}

所以我猜这些道具来自我的路线所在的index.js。但是我如何实现我想做的事情呢？ Index.js是我渲染整个Application的组件。我不是要导出index.js。

我应该将与redux相关的东西（例如mapStateToProps，mapDispatchToProps，connect（），...）移动到index.js吗？还是有另一种解决方案吗？

谢谢！