将道具传递给React-Router 4.0.0子路线

Question

我正在尝试将现有的react-router
3.0.0应用程序迁移到4.0.0。在路由器内，我需要传递prop与其子代无关的其他非路由选择。

在早期版本的react-
router中，有一些技巧性的方法可以实现此目的，本文对此进行了详细介绍。我个人最喜欢的是使用的这种方法cloneElement，因为它可以确保复制所有的react-router道具：

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

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

Answer 1

<Route>可以拿一个render道具代替一个道具component。这使您可以内联组件定义。

<Route path='/user/:userId' render={(props) => (
  <User appState={value} {...props} />
)} />