将状态传递给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 - 历史对象
• location - 位置对象
• params - 从URL中提取的参数
• route - 呈现的组件所属的路由对象
• routeParams - 从呈现的组件所属的路由对象的URL中提取的参数
• routes - 匹配的所有路由对象的数组

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

1.0升级指南有关于此的更多详细信息 。

---

如果要在渲染时将其他道具传递给单个路径组件，可以像这样使用React.cloneElement() ：

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

---

如果要在创建路径组件元素时传递其他道具，可以将自定义createElement()函数传递给<Router> 。