将 React 路由器与路由器一起使用答案

【问题标题】：Using React Router withRouter将 React 路由器与路由器一起使用
【发布时间】：2017-01-03 15:05:59
【问题描述】：

在使用withRouter()时如何获取路由上下文、位置、参数等？

import { withRouter } from 'react-router';

const SomeComponent = ({location, route, params}) => (
    <h1>The current location is {location.pathname}</h1>
);

const ComposedWithRouter = withRouter(SomeComponent);

您能否使用 withRouter 获取该信息，还是必须将这些内容显式传递到组件树中？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

所以，不再使用context。这一切都在道具中可用：

SomeComponent.propTypes = {
  location: React.PropTypes.shape({
    pathname: React.PropTypes.string,
    query: React.PropTypes.shape({
      ...
    })
  }),
  params: React.PropTypes.shape({
    ...
  }),
  router: React.PropTypes.object
}

const ComposedWithRouter = withRouter(SomeComponent);

那么让我们在SomeComponent 中说您想将用户发送到新路线，您只需执行this.props.router.push('someRoute')

【讨论】：

那么唯一的解决方案就是显式地将 props 传递给子组件？如果您想制作和分发组件怎么办？
嗯，这取决于您希望它与路由器的连接方式。如果说您只关心将其分发给使用 react-router 的人，那么与其实际导出 BreadCrumbs, you would export withRouter(BreadCrumbs)` 而不是这样，它始终可以访问路由器/位置。

【解决方案2】：

在 react-router 2.7 版中添加了通过 withRouter 获取位置等。 Dan Abramov 建议升级到 3.0 以与Router 一起使用。 2.7之前只提供了一组函数。

【讨论】：