如何在 React 组件中访问 history.listen？

Question

我有一个特定的组件，希望在用户每次导航时得到通知。有什么方法可以访问传递到路由器的历史记录吗？

<Router history={history}>
   {// ...}
</Router>

子组件：

var Component = React.createClass({
   componentDidMount: function() {
     // history.listen(this.onRouteChange);
   },
   onRouteChange: function() {},
   render: function() {...},
});

Answer 1

我注意到这行得通：

import { browserHistory } from 'react-router';

var Component = React.createClass({
  componentDidMount: function() {
    browserHistory.listen(this.onRouteChange);
  },
  ...
});

但似乎我想使用传递到路由器的实际历史记录而不是盲目地使用 browserHistory。在某些情况下，我改为传入 hashHistory 。仍然希望有更好的解决方案！

Answer 2

像这样使用 'react-router' 中的 withRouter：

import React from 'react' 
import PropTypes from 'prop-types' 
import { withRouter } from 'react-router'

下面是一个显示当前位置路径名的简单组件。对于 history prop 也一样，只是使用 history 而不是 location 然后。

class ShowTheLocation extends React.Component {   
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

创建一个 "connected"（借用 redux // 术语）到路由器的新组件。

const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

发件人：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

如何在 React 组件中访问 history.listen？

How to access history.listen in a React component?

react-router

react-router-redux