javascript - 将状态传递给 react-router 1.x

Question

在 react-router 版本 0.13.3 中我有

Router.run(routes, createBrowserHistory, function(Handler, state) {
    React.render(<Handler query={ state } path={ state.pathname }/>, document.getElementById('app'))
});

在 react-router 1.0.0.rc3 我有

let history = createBrowserHistory();
React.render(<Router history={ history } >{ routes }</Router>, document.getElementById('app'));

使用 react-router 0.13.3，我能够通过回调将状态传递给我的组件。我想知道如何对版本 react-router 1.x 做同样的事情？

Answer 1

React Router 1.0 现在从您的路由组件创建元素，默认将以下与路由相关的状态作为 props 传递给它们:

• history - 一个 History对象
• location - 一个 Location对象
• params - 从 URL 中提取的参数
• route - 渲染组件所属的路由对象
• routeParams - 从渲染组件所属的路由对象的 URL 中提取的参数
• routes - 所有匹配的路由对象的数组

您应该能够使用这些来获取与路由相关的状态，例如要获取路径名，您可以使用 this.props.location.pathname在路由组件中，或将它们传递给需要它们的 child 。

The 1.0 upgrade guide has more details about this .

---

如果你想在渲染时向单个路由组件传递额外的 Prop ，你可以使用 React.cloneElement() 像这样:

{React.cloneElement(this.props.children, {extra: 'extra prop'})

---

如果你想在创建路由组件元素时传递额外的 Prop ，你可以pass a custom createElement() function to <Router> .