Question

我想在我的单页应用程序上安装分析处理程序，并希望捕获主路径下的每个路径更改。我认识到ReactRouter提供了onEnter路由事件;但是，这需要我在每个路由上单独安装处理程序。我可以创建一个自动填充onEnter的Route子类，但之后我将无法覆盖onEnter并仍然保留分析跟踪处理程序。

在给定的根路由中监听任何更改的最佳方法是什么？

Answer 1

您可以使用react-router willTransitionTo静态函数来检测路由更改并在transition.path函数调用中发出ga()，如下所示：

var App = React.createClass({
  mixins: [Router.State],
  statics: {
    willTransitionTo: function(transition, params, query, props) {
      ga('send', 'pageview', {'page': transition.path});
    }
  },
  render: function() {
    return (
      <div>
        <RouteHandler />
      </div>
    );
  }
});

在this answer中可以看到更完整的示例。

Answer 2

答案是（比喻）盯着我看。

启动路由器时，请拨打Router.run(routes, callback)。每次路由更改都会调用回调。因此，以下代码以我想要的方式工作：

Router.run(routes, function (Handler) {
  doSomethingAnalytics(document.location.hash);
  React.render(<Handler/>, document.body.querySelector('#content'));
});

Answer 3

每次更改路线时都会调用此函数

const history = syncHistoryWithStore(browserHistory, store);

history.listen((location)=>{
  console.log(location)
});

Answer 4

React：v15.x，React Router：v4.x

组件/核心/ App.js：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { BrowserRouter } from 'react-router-dom';


class LocationListener extends Component {
  static contextTypes = {
    router: PropTypes.object
  };

  componentDidMount() {
    this.handleLocationChange(this.context.router.history.location);
    this.unlisten = 
this.context.router.history.listen(this.handleLocationChange);
  }

  componentWillUnmount() {
    this.unlisten();
  }

  handleLocationChange(location) {
    // your staff here
    console.log(`- - - location: '${location.pathname}'`);
  }

  render() {
    return this.props.children;
  }
}    

export class App extends Component {
  ...

  render() {
    return (
      <BrowserRouter>
        <LocationListener>
         ...
        </LocationListener>
      </BrowserRouter>
    );
  }
}

index.js：

import App from 'components/core/App';

render(<App />, document.querySelector('#root'));

ReactRouter＆＃34; on change＆＃34;事件？

4 个答案: