location

Location 是指你当前的位置，下一步打算去的位置，或是你之前所在的位置，形式大概就像这样：

  1. {
  2.   key: 'ac3df4', // 在使用 hashHistory 时，没有 key
  3.   pathname: '/somewhere'
  4.   search: '?some=search-string',
  5.   hash: '#howdy',
  6.   state: {
  7.     [userDefined]: true
  8.   }
  9. }

你使用以下几种方式来获取 location 对象：

  • 在 Route component 中，以 this.props.location 的方式获取，
  • 在 Route render 中，以 ({ location }) => () 的方式获取，
  • 在 Route children 中，以 ({ location }) => () 的方式获取，
  • 在 withRouter 中，以 this.props.location 的方式获取。

你也可以在 history.location 中获取 location 对象，但是别那么写，因为 history 是可变的。更多信息请参见 history 文档。

location 对象不会发生改变，因此你可以在生命周期的钩子函数中使用 location 对象来查看当前页面的位置是否发生改变，这种技巧在获取远程数据以及使用动画时非常有用。

  1. componentWillReceiveProps(nextProps) {
  2.   if (nextProps.location !== this.props.location) {
  3.     // 已经跳转了！
  4.   }
  5. }

你可以在不同环境中使用 location ：

通常情况下，你只需要给一个字符串当做 location ，但是，当你需要添加一些 location 的状态时，你可以对象的形式使用 location 。并且当你需要多个 UI ，而这些 UI 取决于历史时，例如弹出框（modal），使用location 对象会有很大帮助。

  1. // 通常你只需要这样使用 location
  2. <Link to="/somewhere"/>
  4. // 但是你同样可以这么用
  5. const location = {
  6.   pathname: '/somewhere'
  7.   state: { fromDashboard: true }
  8. }
  10. <Link to={location}/>
  11. <Redirect to={location}/>
  12. history.push(location)
  13. history.replace(location)

最后，你可以把 location 传入一下组件：

这样做可以让组件不使用路由状态（router state）中的真实 location，因为我们有时候需要组件去渲染一个其他的 location 而不是本身所处的真实 location，比如使用动画或是等待跳转时。