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

使用来自＆＃39; react-router＆＃39;的路由器像这样：

tf.Variable

遵循显示当前位置的路径名的简单组件。对于历史道具也是如此，只需使用历史而不是位置。

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

创建一个连接＆＃34;的新组件。（借用redux //术语）到路由器。

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>
    )
  }
}

来自：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

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

2 个答案: