IT技术 - 将props传递给 React-Router 4.0.0 子路由 - 吾爱随笔录

我正在尝试将现有的 react-router 3.0.0 应用程序迁移到4.0.0。在路由器中，我需要传递一个prop与其子项无关的附加非路由。

在以前版本的 react-router 中，有一些有点hacky 的方法来实现这一点，在这篇文章中有详细说明。我个人最喜欢的是这种使用的方法cloneElement，因为它确保所有 react-router props也被复制：

// react-router 3.0.0 index.js JSX
<Router history={browserHistory}
  <Route path="/" component={App}>
    <Route path="/user/:userId" component={User} />
    <IndexRoute component={Home} />
  </Route>
</Routes>

// App component JSX (uses cloneElement to add a prop)
<div className="App">
  { cloneElement(props.children, { appState: value }) }
</div>

到目前为止，我的新 App 组件如下所示：

// react-router 4.0.0 App component JSX (moved routing code out of index.js and into here)
<BrowserRouter>
  <div className="App">
    <Match exactly pattern="/" component={Home} />
    <Match pattern="/user/:userId" component={User} />
    <Miss component={Home} />
  </div>
</BrowserRouter>

在保留提供的路由器props的同时，将appStateprops添加到每个Match组件的最佳方法是什么？